My favorites | Sign in
Project Logo
                
Search
for
Updated Sep 20, 2008 by larrykluger
Timeline_Moving_the_Timeline_via_Javascript  
JS methods for moving the Timeline

Introduction

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.

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:

Examples

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

Example Page

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

Source: http://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/examples/religions/religions.html


Comment by ctitus12, Oct 04, 2008

How do I center the timeline by clicking on a link?

Comment by megalumpy, Oct 05, 2008

ctitus12, you'd have to pass the information for the specific date that you'll be centering too.

maybe some javascript like:

timeline = document.getElementById('yourTimeline');

function moveTo(date) {

timeline.getBand(0).setCenterVisibleDate(Timeline.DateTime?.parseGregorianDateTime(date));
}

and then in your link you could have something like:

<a href="#" onclick="moveTo('250 AD'); return false">Jump to 250 AD</a>

Hope that answers your question!

Comment by megalumpy, Oct 05, 2008

you'll have to check what the format of the date you're jumping too, I'm not sure which format you'll need.

I'd check their example here.

Comment by s...@telekinese.net, Apr 09, 2009

Does this work with exhbit as well? How can I define two diffrent Timelinevews with different Centers? For Example to show the art history of different Eras with differnt Scales and colorcoders. Perhaps you can helb me with this http://swiki.hfbk-hamburg.de:8888/seminare/uploads/156/Zeitstrahl_Kunstgeschichte2.1.html exhibit

Comment by gauthier.remi, Apr 20, 2009

Is it possible to get the start and end visible date? Is there a band_object.getMinVisibleDate() function available for instance? Thanks in advance.

Comment by gauthier.remi, Apr 20, 2009
Comment by I1t2B3, Jun 08, 2009

Hello!

Very cool library you do!

My questions are: 1. Is there any standard way to add/delete events one by one? I have to write a work around to make this possible by accessing private objects methods and fields (thanks to javascript)?

2. How can I drag events along the timeline (at least horizontally) to change its start dates?

Thanks a lot in advance!

Comment by sam.grigg, Jul 02, 2009

Does anyone know how to animate the timeline to a given date? That is, the user clicks on a link (as described above) and the timeline slides to arrive at the given date?

Comment by muermammu, Jul 06, 2009

Instead of using the setCenterVisibleDate() function, you have to use scrollToCenter().


Sign in to add a comment
Hosted by Google Code