David thanks for the example. I tried that format, but the links still don't work. Here is the code, maybe you can see something that I've done wrong to make the links not work. Thank you.
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="http://simile.mit.edu/timeline/api/timeline-api.js"; type="text/javascript"> </script> <script type="text/javascript"> var t1; function onLoad() { var eventSourceGerman = new Timeline.DefaultEventSource(); var theme = Timeline.ClassicTheme.create(); theme.event.label.width = 400; // px var d = Timeline.DateTime.parseGregorianDateTime("1700"); var bandInfos= [ Timeline.createBandInfo({ eventSource: eventSourceGerman, date: d, width: "60%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 50, theme: theme }), Timeline.createBandInfo({ showEventText: false, trackHeight: 0.5, trackGap: 0.2, eventSource: eventSourceGerman, date: d, width: "20%", intervalUnit: Timeline.DateTime.DECADE, intervalPixels: 100 }), Timeline.createBandInfo({ showEventText: false, trackHeight: 0.5, trackGap: 0.2, eventSource: eventSourceGerman, date: d, width: "20%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 200, }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; bandInfos[2].syncWith = 0; bandInfos[2].highlight = true; for (var i = 0; i < bandInfos.length; i++) { bandInfos[i].decorators = [ new Timeline.SpanHighlightDecorator({ startDate: "Jan 01 1720 12:00:00 GMT-0600", endDate: "Jan 01 1785 12:00:00 GMT-0600", color: "#FFC080", opacity: 50, startLabel: "", endLabel: "", theme: theme }) ]; } t1 = Timeline.create(document.getElementById("t1"), bandInfos); Timeline.loadXML ("events.xml", function(xml, url) {eventSourceGerman.loadXML (xml, url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; t1.layout(); }, 500); } } function centerTimeline(date) { tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date)); } </script> <title>German Timeline</title> </head> <body onload="onLoad();" onresize="onResize();"> <div id="body"> <h1>German 330</h1> <p> You can write anything you would like here. </p> <div id="t1" style="height:400px; border: 4px solid #AAA"> </div> <div style="width: 100%"> <table style="text-align: center; width: 100%"> <tr> <td><a href="javascript:centerTimeline(1700);">1700 AD</a></td> <td><a href="javascript:centerTimeline(1750);">1750 AD</a></td> <td><a href="javascript:centerTimeline(1800);">1800 AD</a></td> <td><a href="javascript:centerTimeline(1850);">1850 AD</a></td> <td><a href="javascript:centerTimeline(1900);">1900 AD</a></td> <td><a href="javascript:centerTimeline(1950);">1950 AD</a></td> <td><a href="javascript:centerTimeline(2000);">2000 AD</a></td> </tr> </table> </div> </body> </html> > > Anna Klochko wrote: > > I've been trying to create links under the timeline that will recenter the > > timeline to the date on the link. The links appear, but they don't actually > > recenter the timeline. Is there something that I'm missing. I've seen the > > > > function centerTimeline(date) { > > > > tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(date)); > > > > but where exactly does that need to go, for it to make the links work? > > > > So your html should look something like this: > > <html> > <head> > ... > <script type="text/javascript"> > var tl; > function onLoad() { > ... make the time line ... > } > > function centerTimeline(date) { > ... > } > </script> > ... > </head> > <body onload="onLoad();"> > ... > <a href="javascript:centerTimeline(1984);">1984</a> > ... > </body> > </html> > > David > _______________________________________________ General mailing list [email protected] http://simile.mit.edu/mailman/listinfo/general
