Visualize your Twitter Timiline with jQuery and SIMILE<\/title>\n <script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.3.2\/jquery.min.js\" type=\"text\/javascript\"><\/script> \n <script src=\"http:\/\/simile.mit.edu\/timeline\/api\/timeline-api.js\" type=\"text\/javascript\"><\/script> \n <style type=\"text\/css\" media=\"screen\">\n body { background-color: #000; font: 14px Helvetica, Arial; color: #fff; }\n #my-timeline, #source { margin-top: 15px; }\n #criteria, #my-timeline, #source { margin-bottom: 15px; }\n\n .timeline-band-layer-inner { font-size: 10px; }\n .timeline-event-bubble-title, .timeline-event-bubble-body { color: black; }\n .timeline-event-bubble-time { padding-top: 5px; color: #ccccc; font-size: 9px; }\n <\/style> \n <script type=\"text\/javascript\"> \n $(function() {\n $(\"#my-timeline\").hide();\n $('#getTwitterTimeline').click(function() {\n getTwitterTimeline($('#userName').val());\n });\n }); \n \n var timeLine;\n function getTwitterTimeline(userName) {\n var eventSource = new Timeline.DefaultEventSource();\n var url = 'http:\/\/twitter.com\/status\/user_timeline\/' + userName + '.json?count=200&callback=?'; \n $.getJSON(url, function(data) { \n $(\"#my-timeline\").fadeIn('slow');\n var mostRecentTweetDate = new Date(1);\n $.each(data, function(i, item) { \n var dateEvent = Date.parse(item.created_at); \n mostRecentTweetDate = (dateEvent > mostRecentTweetDate) ? dateEvent : mostRecentTweetDate;\n var html = replaceUrlWithHtmlLinks(item.text);\n var evt = new Timeline.DefaultEventSource.Event(\n new Date(dateEvent), \/\/start\n null, \/\/end\n null, \/\/latestStart\n null, \/\/earliestEnd\n true, \/\/instant\n item.text.substr(0, 47) + '...', \/\/text\n html \/\/description\n );\n eventSource.add(evt); \n });\n \n var bandInfos = [\n Timeline.createBandInfo({\n trackGap: 0.2,\n width: \"80%\", \n intervalUnit: Timeline.DateTime.HOUR, \n intervalPixels: 500,\n eventSource: eventSource,\n timeZone: new Date().getTimezoneOffset() \/ 60,\n date: new Date(mostRecentTweetDate).toGMTString()\n }),\n Timeline.createBandInfo({\n showEventText: false,\n trackHeight: 0.5,\n trackGap: 0.2,\n width: \"20%\", \n intervalUnit: Timeline.DateTime.DAY, \n intervalPixels: 300,\n eventSource: eventSource,\n timeZone: new Date().getTimezoneOffset() \/ 60,\n date: new Date(mostRecentTweetDate).toGMTString()\n })\n ];\n \n bandInfos[1].syncWith = 0;\n bandInfos[1].highlight = true;\n timeLine = Timeline.create($(\"#my-timeline\")[0], bandInfos); \n });\n }\n\n var resizeTimerID = null; \n $('body').resize(function() {\n if (resizeTimerID == null) {\n resizeTimerID = window.setTimeout(function() {\n resizeTimerID = null;\n timeLine.layout();\n }, 500);\n }\n });\n \n function replaceUrlWithHtmlLinks(text) { \n var exp = \/(\\b(https?|ftp|file):\\\/\\\/[-A-Z0-9+&@#\\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\\\/%=~_|])\/ig; \n return text.replace(exp,\"<a href='$1'>$1<\/a>\"); \n } \n <\/script>\n <\/head>\n <body>\n <h3>Visualize your Twitter Timeline with jQuery and SIMILE<\/h3>\n <div id=\"criteria\">\n <span>Twitter Username: <\/span>\n <input id=\"userName\" type=\"text\" value=\"elijahmanor\" \/> \n <button id=\"getTwitterTimeline\">Twitter Timeline<\/button>\n <\/div>\n <div id=\"my-timeline\" style=\"height: 200px;\"><\/div>\n <a id=\"source\" href=\"http:\/\/jsbin.com\/ekimi3\/edit\" target=\"_blank\">View, Run, & Edit Source Code<\/a> \n <\/body>\n<\/html>\n","javascript":"if (document.getElementById('hello')) {\n document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';\n}\n"}