Thank you! I figured it out now by fixing all the line breaks & adding the url to the JSON var :)
On Dec 4, 12:17 am, Ryan Lee <[email protected]> wrote: > 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. > > Seehttp://stackoverflow.com/questions/508269/how-do-i-break-a-string-acr... > > (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 > > ... > > read more » -- 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.
