I'm trying to create a timeline of Medieval English History, but it's not working and I just don't see why! All the code looks fine to me and is pretty much 1:1 copied from the offline example. It would terrific if you could point me to whatever it is that I'm doing wrong here.
Here's the source code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>Medieval</title> <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/ reset-fonts-grids/reset-fonts-grids.css" type="text/css"> <link rel="stylesheet" type="text/css" href="http:// yui.yahooapis.com/2.7.0/build/base/base-min.css"> <script src="http://static.simile.mit.edu/timeline/api-2.3.0/ timeline-api.js?bundle=true" type="text/javascript"></script> <style type="text/css"> body { font-family: Arial, Verdana, Sans-Serif; font-size: 14px; line-height: 20px; } #container { width: 900px; margin: 0 auto; } #content { } #content li { margin-bottom: 5px; } /* timeline */ #doc3 {background-color: #fff8dc;} #wrap1 {display: block;} #hd, #ft {margin: 2em; padding-top: 2em;} #ft {padding-bottom: 1em;} #bd div.yui-g {margin: 2em;} h1 {color: #834c24;} p {margin-top: .5em;} </style> </head> <body onload="onLoad();" onresize="onResize();"> <div id="container"> <div id="header"> <h1>Timeline of Medieval Britain</h1> </div> <div id="content"> <script language="javascript" type="text/javascript"> var timeline_data = { // save as a global variable 'dateTimeFormat': 'iso8601', 'events' : [ {'start': '200', 'end': '400', 'title': 'North, East & West Germanic', 'description': 'The Germanic language split up in North (Scandinavian, Old Norse), East (Gothic) and West (Low and High German).', 'textColor' : 'blue' }, {'start': '410', 'title': 'Romans leave Britain', 'description': 'The Roman Empire crumbles...', 'color' : 'red', 'textColor' : 'orange' }, {'start': '449', 'end': '600', 'title': 'Arrival of Germanic Tribes', 'description': 'King Vortigern summons Angles, Saxons, Jutes and Frisians to help defeat the Picts and Scots. They found the land fertile and invited more members of Germanic tribes to join them.', 'color' : 'red', 'textColor' : 'green' }, {'start': '660', 'end': '800', 'title': 'The Golden Age', 'description': 'Golden Age of learning and education, literature (Latin) and arts. English Church scholars were renowned throughout Europe and asked to convert continental lGermanic tribes to Christianity.', 'textColor' : 'red' }, {'start': '735', 'title': 'Bede\'s Death Song', 'description': 'Bede is reported to have composed his Death Song in his death bed and is only five lines.', 'textColor' : 'black' }, {'start': '793', 'title': 'First Viking Attack', 'description': 'The vikings raid Lindisfarne monastery', 'color' : 'red', 'textColor' : 'green' }, {'start': '800', 'end': '900', 'title': 'The first Viking Age', 'description': '', 'textColor' : 'green' }, {'start': '871', 'end': '899', 'title': 'Alfred the Great', 'description': '\"The first King of England\"', 'textColor' : 'orange' }, {'start': '878', 'title': 'King Alfred wins against Viking', 'description': 'Alfred the Great wins a decisive battle against the viking at Edington & makes a treaty', 'textColor' : 'orange' }, {'start': '880', 'end': '900', 'title': 'King Alfred\'s Reform', 'description': 'Under the threat of Roome, King Alfred reformed the church, but the reformation didn\'t last', 'textColor' : 'red' }, {'start': '449', 'title': 'Beginning', 'description': 'test' } ] } </script> <script language="javascript" type="text/javascript"> var tl; function onLoad() { var tl_el = document.getElementById("tl"); var eventSource1 = new Timeline.DefaultEventSource(); var theme1 = Timeline.ClassicTheme.create(); theme1.autoWidth = true; // Set the Timeline's "width" automatically. // Set autoWidth on the Timeline's first band's theme, // will affect all bands. theme1.timeline_start = new Date(Date.UTC(100, 0, 1)); theme1.timeline_stop = new Date(Date.UTC(2011, 0, 1)); var d = Timeline.DateTime.parseGregorianDateTime("1900") var bandInfos = [ Timeline.createBandInfo({ width: 45, // set to a minimum, autoWidth will then adjust intervalUnit: Timeline.DateTime.CENTURY, intervalPixels: 200, eventSource: eventSource1, date: d, theme: theme1, layout: 'original' // original, overview, detailed }), Timeline.createBandInfo({ overview: true, width: "30%", eventSource: eventSource1, intervalUnit: Timeline.DateTime.MILLENNIUM, intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; // create the Timeline tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL); var url = '.'; // The base url for image, icon and background image // references in the data eventSource1.loadJSON(timeline_data); // The data was stored into the // timeline_data variable. tl.layout(); // display the Timeline } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } </script> <div id="doc3" class="yui-t7"> <div id="hd" role="banner"> <h1>Local Timeline Example</h1> <p>This example reads a local data file from the disk and displays it using the Simile Timeline library. The software library is retrieved from servers via the Internet.</p> <p>The Timeline will grow automatically to fit the events. Scroll towards 2030 to see it grow. Click on an event to see its details.</p> </div> <div id="bd" role="main"> <div class="yui-g"> <div id='tl'></div> <p>To move the Timeline: use the mouse scroll wheel, the arrow keys or grab and drag the Timeline.</p> </div> </div> <div id="ft" role="contentinfo"> <p>Thanks to the <a href=''>Simile Timeline project</a> Timeline version <span id='tl_ver'></span></p> <script>Timeline.writeVersion('tl_ver')</script> </div> </div> </div> <div class="clear"></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.
