On Mar 2, 2012, at 5:01 AM, Andrew Holbrook wrote:
> Hi,
>
> I came across timeline tonight and it looks very intriguing for a
> project of mine. I am curious, when I move the slider or double tap/
> click on the timeline, is there any sort of event listener to connect
> to that will give me the new date/time for the highlighted region?
>
> Cheers,
> Andrew B. Holbrook
Yes, this is easy.
Timelines can be constructed of multiple bands. They are usually sync'ed
together, so that they are showing the same time.
Suppose you have a simple Timeline with a detail band and an overview band. The
detail band may show three days of events while the overview band may show a
month's worth. The highlight region on the overview band should correspond to
the visible part of the detail band.
When the Timeline scrolls, it triggers any functions registered as
scrollListeners on the bands.
To get the center date of the top band, where tl is the variable that you've
assigned your Timeline.
tl = Timeline.create(...)
var dateDiv = document.getElementById("dateDiv");
tl.getBand(0).addOnScrollListener(function(band) {
var centerDate = band.getCenterVisibleDate();
// formatDate is whatever function you want to use to format the date
the way you want
dateDiv.innerHTML = formatDate(centerDate);
});
Whenever your Timeline detail band scrolls, it will set the contents of the
dateDiv to the center date of the band.
To get the range of dates that are visible (or the range of the highlight shown
on the overview band), call:
tl.getBand(0).getMinVisibleDate();
tl.getBand(0).getMaxVisibleDate();
Indeed, that is what the Timeline.Band code calls to set the highlight for an
overview band.
--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.
