Thank you for your reply. I tried changing the url and loadJSON as well as removing the dateTimeFormat, but it's still not working.
You can find the live version here: http://chaosworks.org/dump/timeline.php I've tried it with all events as well as just one or a few, never works... On Dec 2, 10:32 pm, Ryan Lee <[email protected]> wrote: > 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.
