Adding a vertical scrollbar to the timeline makes sense because the vertical
height required to display all the events can exceed the available height for
the timeline, or even exceed the height of the viewport. The scrollbar will
work correctly because the height (of your timeline) is a fixed size. Changing
this to a horizontal scrollbar to scroll forward and backward through time is a
confusing thing, since the timeline itself is scrollable and will act as if it
has infinite width, something you can't easily map to a scrollbar. The <div>
for a band might be 3000px wide, but it is constantly repositioned as you click
and drag the timeline to make it look as if it is infinite in width.
What is doable is to add clickable buttons to adjust the position of the
timeline forward or backward in time.
For example,
<input type="button" id="backInTime" value="Go back in time">
<input type="button" id="forwardInTime" value="Go forward in time">
SimileAjax.DateTime has .incrementByInterval. Let's add .decrementByInterval:
SimileAjax.DateTime.decrementByInterval = function(date, intervalUnit,
timeZone) {
timeZone = (typeof timeZone == 'undefined') ? 0 : timeZone;
var timeShift = timeZone *
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR];
var date2 = new Date(date.getTime() + timeShift);
switch(intervalUnit) {
case SimileAjax.DateTime.MILLISECOND:
date2.setTime(date2.getTime() - 1)
break;
case SimileAjax.DateTime.SECOND:
date2.setTime(date2.getTime() - 1000);
break;
case SimileAjax.DateTime.MINUTE:
date2.setTime(date2.getTime() -
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.MINUTE]);
break;
case SimileAjax.DateTime.HOUR:
date2.setTime(date2.getTime() -
SimileAjax.DateTime.gregorianUnitLengths[SimileAjax.DateTime.HOUR]);
break;
case SimileAjax.DateTime.DAY:
date2.setUTCDate(date2.getUTCDate() - 1);
break;
case SimileAjax.DateTime.WEEK:
date2.setUTCDate(date2.getUTCDate() - 7);
break;
case SimileAjax.DateTime.MONTH:
date2.setUTCMonth(date2.getUTCMonth() - 1);
break;
case SimileAjax.DateTime.YEAR:
date2.setUTCFullYear(date2.getUTCFullYear() - 1);
break;
case SimileAjax.DateTime.DECADE:
date2.setUTCFullYear(date2.getUTCFullYear() - 10);
break;
case SimileAjax.DateTime.CENTURY:
date2.setUTCFullYear(date2.getUTCFullYear() - 100);
break;
case SimileAjax.DateTime.MILLENNIUM:
date2.setUTCFullYear(date2.getUTCFullYear() - 1000);
break;
}
date.setTime(date2.getTime() - timeShift);
};
Then bind handlers to your buttons (with jQuery):
$(document).ready(function() {
$("#backInTime").click(function() {
var currentTime = tl.getBand(0).getCenterVisibleDate();
SimileAjax.DateTime.decrementByInterval(currentTime,SimileAjax.DateTime.MONTH);
tl.getBand(0).setCenterVisibleDate(currentTime);
});
$("#forwardInTime").click(function() {
var currentTime = tl.getBand(0).getCenterVisibleDate();
SimileAjax.DateTime.incrementByInterval(currentTime,SimileAjax.DateTime.MONTH);
tl.getBand(0).setCenterVisibleDate(currentTime);
});
});
Now each button click will move the timeline forward or backward by one month.
Likewise, you can easily add buttons to jump the timeline to specific dates or
relative dates (e.g. jump back to Monday, or go to the start of the month).
--Mike
On Jan 9, 2012, at 2:47 PM, Kevin Keifari wrote:
> I followed the directions listed here
> http://simile.mit.edu/wiki/Timeline/vertical_scrollbar
> but just did the opposite so it would be a horizontal scrollbar. The
> scrollbar shows up, but it doesnt scroll through my entire timeline,
> only half of it.
>
> Is there any other method for adding a horizontal scrollbar?
>
> Or is there a method to make a clickable arrow below the timeline that
> scrolls through my timeline when you're clicking on it?
>
> --
> 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.
