I am trying to work with events on a Timeline that occur in the millisecond range, but have had several problems. First of all, I have found what I *think* is a bug in the scrolling/syncing of the millisecond band. I have created 4 bands: hours, minutes, seconds and milliseconds. When I "grab" the millisecond band and begin scrolling to the right (into the future) it works fine, but when I scroll to the left (back in time), the "seconds" band moves much faster than it should and the two bands are no longer in sync. This is evident with or without events loaded. I have posted the code below in hopes that it is actually my mistake and someone can catch it!
My second problem is that I am unable to load events into the Timeline with the precision of milliseconds. The 'start' tag will accept dates/times in the format "Aug 01 2007 00:00:00 GMT", but I want to add an event that starts at (for example): "Jul 04 2007 05:32:50.130 GMT". I imagine this is somehow possible, but haven't found a clear answer in the forums yet. I apologize in advance, but I am fairly new at programming, so please keep that in mind if you respond! Thanks! John --------------------------- begin code ---------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";;> <html xmlns="http://www.w3.org/1999/xhtml";;> <head> <title>Timeline test</title> <script src="http://simile.mit.edu/timeline/api/timeline-api.js";; type="text/javascript"></script> <script type="text/javascript"> var tl; function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: "Nov 29 2007 00:00:00 PST", width: "30%", intervalUnit: Timeline.DateTime.MILLISECOND, intervalPixels: 100 }), Timeline.createBandInfo({ eventSource: eventSource, date: "Nov 29 2007 00:00:00 PST", width: "30%", showEventText: false, intervalUnit: Timeline.DateTime.SECOND, intervalPixels: 200 }), Timeline.createBandInfo({ eventSource: eventSource, date: "Nov 29 2007 00:00:00 PST", width: "20%", showEventText: false, intervalUnit: Timeline.DateTime.MINUTE, intervalPixels: 200 }), Timeline.createBandInfo({ eventSource: eventSource, date: "Nov 29 2007 00:00:00 PST", width: "20%", showEventText: false, intervalUnit: Timeline.DateTime.HOUR, intervalPixels: 100 }) ]; bandInfos[1].syncWith = 0; bandInfos[2].syncWith = 1; bandInfos[3].syncWith = 2; bandInfos[1].highlight = true; bandInfos[2].highlight = true; bandInfos[3].highlight = true; bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout()); tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); tl.loadJSON("data.js", function(json,url) { eventSource.loadJSON(json,url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 100); } } </script> </head> <body onload="onLoad();" onresize="onResize();"> <div class="label"><span style="color: #193441;">title goes here</span></div> <div id="my-timeline" style="height: 500px; border: 1px solid #aaa"></div> </body> </html> ----------------------------- end code ----------------------------------- ____________________________________________________________________________________ Looking for last minute shopping deals? Find them fast with Yahoo! Search. http://tools.search.yahoo.com/newsearch/category.php?category=shopping _______________________________________________ General mailing list [email protected] http://simile.mit.edu/mailman/listinfo/general
