You don't need to modify anything in the source files for Timeline.
Suppose you have a simple timeline and you are populating it with JSON (or XML)
data that is fetched via ajax. Timeline's loadJSON function takes a callback
that is executed when the data has been returned. For example:
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [ Timeline.CreateBandInfo({ ....}), etc.]
var tl = Timeline.create(document.getElementById("timelinediv",bandInfos);
tl.loadJSON("myevents.json", function(data, url) {
eventSource.loadJSON(data,url);
showFirstBubble(tl);
});
This will not execute showFirstBubble until after you have loaded your event
data into the eventSource.
You can define showFirstBubble wherever you like, e.g. in your own page
<script>. It doesn't need to be in the Timeline src code.
--Mike
On Mar 11, 2010, at 8:29 PM, Deuce wrote:
> Mike and Jon,
>
> Thank you for the pieces of code, I would like to try these out, but
> forgive my ignorance when I ask which file it is you are modifying and
> where in that file?
> I searched all of the files for the "loadJSON" and in timeline.js
> there is a line "Sources[0].loadJSON(args.events, url);" Would it be
> somewhere around that?
> This is a single band timeline inside of Drupal. You can view what I
> have so far at http://bit.ly/9RIVjj just needing to get that first
> bubble to popup.
>
> If you could let me know where to add either one of your functions I
> would appreciate! Thank you very much!
>
> Kyle
>
> On Mar 10, 8:10 am, Michael Nosal <[email protected]> wrote:
>>> I would like for the very first bubble to automatically display when
>>> the page is loaded.
>>> I have looked around and don't see what I should be editing.
>>> If you have any input on what it would take to do this, please let me
>>> know.
>>
>>> Thank you very much!
>>
>> Here's how to get Timeline to automatically show the bubble for the first
>> event when the Timeline loads:
>>
>> Once you are done loading your events, you can tell Timeline to show the
>> bubble for the first event. If you are loading events via ajax, you'll have
>> to wait for the XHR to return and for Timeline to process the events. You
>> can add this function to your loadJSON callback.
>>
>> Let's assume you have a simple timeline with one band:
>>
>> function showFirstBubble(tl) {
>> var band = tl.getBand(0);
>> var firstEvent = band.getEventSource().getAllEventIterator().next();
>> band.setCenterVisibleDate(firstEvent.getStart());
>> band.getEventPainter().showBubble(firstEvent);
>>
>> }
>>
>> This will find the first event, scroll the timeline to it and show the
>> bubble.
>> If you initialize your timeline to another date, then you'll need to decide
>> which event you want to be "first". For example, in the JFK Timeline, the
>> first event in the dataset is the Bay of Pigs Invasion, but the Timeline is
>> initialized at the time of JFK's death.
>>
>> Let me know if this works for you.
>>
>> --Mike
>
> --
> 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.
>
--
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.
