Problem solved... thanks to Larry's lead. Here's the code that, when
a timeline event is clicked on, displays the events information in a
<div> next to the timeline, rather than in the standard pop-up
bubble. A nice alternative when there's lots of info to put in that
bubble. I doubt the code's as clean as it should be, but it works!
<table ex:role="lens"> // create the lens & a table to
format & display the results as I want them arranged
<tr>
<td>
<span ex:content=".label" class="bubbleTitle"></
span>
</td>
</tr>
<tr>
<td><span ex:content=".image" class="bubbleImg"></span>
Field: <span ex:content=".field"></span>
<br />
Type: <span
ex:content=".type"></span>
<br />
Location: <span
ex:content=".location"></span>
<br />
Date: <span ex:content=".startDateDisplay"></span>
- <span ex:content=".endDateDisplay"></span>
<br />
Link: <span ex:content=".link"></span>
<br />
<br />
<span ex:content=".description"></
span>
</td>
</tr>
<tr>
<td>
<span ex:content=".video" class="year"></
span>
</td>
</tr>
</table>
<script> // script to override the
default bubble EventPainter script
Timeline.OriginalEventPainter.prototype._showBubble = function (x,
y, evt) {
document.getElementById('bob').innerHTML = "";
var themeBubble =
this._params.theme.event.bubble; //
get the parameters for creating the bubble
evt.fillInfoBubble(bob, this._params.theme, this._band.getLabeller
()); // add content to the div. This will be the
content of the bubble.
};</script>
<div id="bob"> // the div to capture it all
</div>
On Mar 11, 12:45 pm, Larry Kluger <[email protected]> wrote:
> Hi James,
>
> If I understand your email correctly, you want to use an alternative to the
> standard Timeline bubble.
>
> There are many options for solving the problem.
>
> The first issue is how your sw should be notified when the user clicks on an
> event shown in the Timeline.
> Easiest would be to replace the
> Timeline.OriginalEventPainter.prototype._showBubble
> method with your own.
>
> Once your method knows that it needs to display content on the screen, you
> can dynamically change the contents of a div that you've identified.
> Or you can use a movable, re-sizable window. Eg see YUI container and resize.
> An
> example:http://developer.yahoo.com/yui/examples/container/panel-resize_source...
>
> Regards,
>
> Larry
>
> ________________________________
> From: SiteStories <[email protected]>
> To: Larry Kluger <[email protected]>
> Sent: Wednesday, March 11, 2009 11:41:17 AM
> Subject: Re: open a bubble without an event
>
> Hi Larry,
>
> My first time asking a question in this forum. Hope I'm sending it
> correctly. I wanted to reach out to you, because your earlier post
> seems to get at my question:
>
> I'm trying to code Exhibit so that when a person clicks on an event in
> the Timeline, the event info displays not in the standard bubble, but
> in an area next to or underneath the timeline (i.e. a seperate div or
> something that I set up). (I'm trying to avoid the situation where
> the pop-up bubble covers over so much of the timeline, and the
> adjoining, coordinated map. I'm putting a good deal of info in the
> bubble, and it's just too big to appear overlaid on top of the other
> exhibit info).
>
> 2 resources seem to give me the early hints at how to do this
>
> 1. The timeline google code help
> area:http://code.google.com/p/simile-widgets/wiki/Timeline_CustomEventClic...
>
> 2. Your reply to an earlier question (see your code below.
>
> My problem... I'm not experienced enough to take that info and run
> with it. Could you by chance send me "the rest." i.e. What would
> the full code look like... what do I need to add to my core
> exhibit .html file... to make the timeline event info show up in an
> area of the page other than the pop-up bubble?
>
> Thanks for any ideas you can offer!
>
> James
>
> On Feb 25, 12:13 pm, Larry Kluger <[email protected]> wrote:
>
> > Hi Pascal,
>
> > To create a bubble, check out the function
> > Timeline.OriginalEventPainter.prototype._showBubble in original-painter.
> > and copy what it does.
>
> > I've added comments to the code:
> > Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
> > var div = document.createElement("div"); // create a div that will
> > hold the contents of the bubble
> > var themeBubble = this._params.theme.event.bubble; // get the
> > parameters for creating the bubble
> > evt.fillInfoBubble(div, this._params.theme, this._band.getLabeller());
> > // add content to the div. This will be the content of the bubble.
>
> > SimileAjax.WindowManager.cancelPopups(); // dismiss any bubbles that
> > are currently being shown
> > SimileAjax.Graphics.createBubbleForContentAndPoint(div, x, y,
> > themeBubble.width, null, themeBubble.maxHeight); // show the
> > bubble on the screen
>
> > };
>
> > Hope this helps,
>
> > Larry
>
> > ________________________________
> > From: cronjob <[email protected]>
> > To: SIMILE Widgets <[email protected]>
> > Sent: Tuesday, February 24, 2009 4:53:46 PM
> > Subject: [timeline] open a bubble without an event
>
> > hello,
> > I'm using a timeline and need a popup to add information. To have a
> > consitent style, I want to use the bubbles from the timeline, but
> > without klicking on an event. I've only basic javascript skills. So
> > does anybody know if this is possible?
>
> > thanks,
> > pascal
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
