Timeline Moving the Timeline via Javascript

From SIMILE Widgets

Contents

[edit] JS methods for moving the Timeline

The user can move the Timeline via dragging the Timeline with the mouse, using the mouse-wheel, arrow keys, etc. In addition, you can add HTML controls to your page that will move the Timelins to specific dates.

[edit] Details

Bands provide three methods for moving their Timeline. Any other bands will move too, if they are connected to the band that you're moving. The methods are:

  • band_object.setMinVisibleDate(date) -- set the left side of the visible part of the Timeline to a specific date
  • band_object.setMaxVisibleDate(date) -- set the right side of the visible part of the Timeline to a specific date
  • band_object.setCenterVisibleDate(date) -- set the center of the visible part of the Timeline to a specific date
  • band_object.scrollToCenter(date) -- for the scroll effect, e.g. tl.getBand(0).scrollToCenter(Timeline.DateTime.parseGregorianDateTime(year));

[edit] Examples

tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date))

[edit] Example Page

See the date anchor elements (1 AD, 250 AD, etc) at the top of the Religion Timelines example.

Personal tools
TOOLBOX
LANGUAGES