Perhaps you might use a developer console, like Firebug for Firefox or the built-in for all modern browsers. The Firebug console reports an issue with line breaks in your quoted strings (line 101, at least) - Javascript does not treat "a b" like a string with a carriage return in it, rather it treats it as two separate lines, the first line missing a terminating quote. Put all of your quoted strings on one line each and embed HTML line breaks in them to display line breaks to the user, or encode newlines (\n): "a\nb" or "a<br />b". Note that "a\ b" (with a backslash before the line break) is not valid Javascript.
See http://stackoverflow.com/questions/508269/how-do-i-break-a-string-across-more-than-one-line-of-code-in-javascript (I had fixed those when using your mailed source assuming they were introduced by copy-paste / email). On 12/3/11 07:49 , Adastra wrote: > 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.
