I have been trying to get the timeline to display. I have reviewed all the documentation and the examples but I still can't get the Timelines to display. I have been setting up on Visual Web Developer and have been closely watching the posts on IE and trailing commas. Here is the code for what I have developed. Am I doing something wrong? I have also tried in FF all to no avail. I have not uploaded to the server yet, until I can get it to display.
Mark <!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> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / > <script src="http://static.simile.mit.edu/timeline/api-2.2.0/ timeline-api.js" type="text/javascript"></script> </head> <body> <div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></ div> <noscript>This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.</ noscript> <script> var tl; function onLoad() { var eventSourceTribal = new Timeline.DefaultEventSource (0); var eventSourcePolitical = new Timeline.DefaultEventSource (0); var theme = Timeline.ClassicTheme.create(); theme.event.bubble.width = 320; theme.ether.backgroundColors = [ "#D1CECA", "#E7DFD6", "#E8E8F4", "#D0D0E8" ]; var d = Timeline.DateTime.parseGregorianDateTime("0"); var bandInfos = [ Timeline.createHotZoneBandInfo({ width: "7%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 70, zones: zones2, eventSource: eventSourceTribal, date: d, overview: true, theme: theme }), Timeline.createHotZoneBandInfo({ width: "32%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 250, zones: zones, eventSource: eventSourceTribal, date: d, timeZone: -6, theme: theme }), Timeline.createHotZoneBandInfo({ width: "54%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 250, zones: zones, eventSource: eventSourcePolitical, date: d, timeZone: -6, theme: theme }), Timeline.createHotZoneBandInfo({ width: "7%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 70, zones: zones2, eventSource: eventSourcePolitical, date: d, overview: true, theme: theme }) ]; bandInfos[0].syncWith = 1; bandInfos[0].highlight = true; bandInfos[2].syncWith = 1; bandInfos[3].syncWith = 2; bandInfos[3].highlight = true; tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL); tl.loadXML("tribal.xml", function(xml, url) { eventSourcetribal.loadXML(xml, url); document.getElementById("tribal-event- count").innerHTML = eventSourceTribal.getCount(); }); tl.loadXML("political.xml", function(xml, url) { eventSourcePolitical.loadXML(xml, url); document.getElementById("political-event- count").innerHTML = eventSourcePolitical.getCount(); }); setupFilterHighlightControls(document.getElementById ("tribal-controls"), tl, [0, 1], theme); setupFilterHighlightControls(document.getElementById ("political-controls"), tl, [2, 3], theme); } function centerTimeline(year) { tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1)); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } </script> </head> <div id="body"> <h1>Afghanistan Timelines: Tribal History + Political History</h1> <p>Sources: The Tribal timeline (top) contains <span id="tribal-event- count"></span> events while the Political timeline (bottom) contains <span id="political- event-count"></span> events. This information is derived from open sources contained in all SCDE repositories. </p> <div style="width: 100%"> <table style="text-align: center; width: 100%"> <tr> <td><a href="javascript:centerTimeline(1);">1 AD</a></ td> <td><a href="javascript:centerTimeline(250);">250 AD</ a></td> <td><a href="javascript:centerTimeline(500);">500 AD</ a></td> <td><a href="javascript:centerTimeline(750);">750 AD</ a></td> <td><a href="javascript:centerTimeline(1000);">1000 AD</a></td> <td><a href="javascript:centerTimeline(1250);">1250 AD</a></td> <td><a href="javascript:centerTimeline(1500);">1500 AD</a></td> <td><a href="javascript:centerTimeline(1750);">1750 AD</a></td> <td><a href="javascript:centerTimeline(2000);">2000 AD</a></td> </tr> </table> </div> <div class="controls" id="tribal-controls"> </div> <div id="tl" class="timeline-default" style="height: 800px"> </div> <div class="controls" id="political-controls"> </div> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
