Try this:
<html xmlns="http://www.w3.org/1999/xhtml";> <head profile="http://gmpg.org/xfn/11";> <script src="http://simile.mit.edu/timeline/api/timeline-api.js"; type="text/javascript"></script> <script src="http://simile.mit.edu/timeline/examples/examples.js"; type="text/javascript"></script> <script> var tl; function onLoad() { var eventSourceInformation = new Timeline.DefaultEventSource(0); var theme = Timeline.ClassicTheme.create(); theme.event.bubble.width = 320; theme.event.bubble.height = 220; theme.event.highlightColors = [ "#418200", "#FFFF41", "#820000", "#004182" ]; var zones = [ { start: "-32700", end: "-4000", magnify: 0.35, unit: Timeline.DateTime.CENTURY, multiple: 10 }, { start: "-4500", end: "-1000", magnify: 0.7, unit: Timeline.DateTime.CENTURY, multiple: 5 }, { start: "-1000", end: "1170", magnify: 1.75, unit: Timeline.DateTime.CENTURY, multiple: 2 }, { start: "1170", end: "1700", magnify: 5.7, unit: Timeline.DateTime.DECADE, multiple: 4 }, { start: "1700", end: "2400", magnify: 30, unit: Timeline.DateTime.YEAR, multiple: 10 } ]; var zones2 = [ { start: "-32700", end: "10000", magnify: 2, unit: Timeline.DateTime.CENTURY, multiple: 20 } ]; var d = Timeline.DateTime.parseGregorianDateTime("0"); var bandInfos = [ Timeline.createHotZoneBandInfo({ width: "66%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 35, zones: zones, eventSource: eventSourceInformation, date: d, timeZone: -6, trackHeight: 1.9, theme: theme }), Timeline.createHotZoneBandInfo({ width: "34%", intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 10, zones: zones2, eventSource: eventSourceInformation, date: d, showEventText: false, trackHeight: 0.25, trackGap: 0.05, theme: theme }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL); tl.loadXML("/wp-content/themes/ai3/information.xml", function(xml, url) { eventSourceInformation.loadXML(xml, url); }); setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } </script> </head> <body onload="onLoad();" onresize="onResize();"> <div id="tl" class="timeline-default" style="height: 500px; border: 1px solid #aaa;"> </div> </body> </html> 2009/1/26 Carter <[email protected]> > > 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<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 -~----------~----~----~----~------~----~------~--~---
