I'm not normally on the Timeline side of things, it would probably reduce the barrier for people to help if you posted your file at a public URL and sent it out so we could just click to review in the future. One of the issues introduced by sending source is adding line breaks where they'll cause issues, like in the middle of a comment or a quoted string.
With those resolved, there were two things I changed that brought your Timeline to life: using your url var as the second argument in loadJSON, and removing the "'dateTimeFormat': 'iso8601'," line. On 11/29/11 06:11 , Adastra wrote: > <!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.
