Skip to content
Browse files

Fixed formatting and added more data

  • Loading branch information...
1 parent 061d759 commit 555879a217bce0e049c7e2a601ec1ddf62d3d021 Telofy committed Feb 25, 2012
Showing with 89 additions and 84 deletions.
  1. +7 −2 derpy_timeline.css
  2. +58 −69 derpy_timeline.html
  3. +24 −13 derpy_timeline_data.js
View
9 derpy_timeline.css
@@ -1,2 +1,7 @@
-#wrap1 {display: block;}
-#bd div.yui-g {margin: 2em;}
+#wrap1 {
+ display: block;
+}
+
+#bd div.yui-g {
+ margin: 2em;
+}
View
127 derpy_timeline.html
@@ -1,70 +1,59 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
<head>
- <!-- See http://developer.yahoo.com/yui/grids/ for info on the grid layout -->
- <title>Local Timeline Example</title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+ <title>Derpy Hooves Timeline</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <!-- See http://developer.yahoo.com/yui/ for info on the reset, font and base css -->
- <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">
+ <!-- See http://developer.yahoo.com/yui/grids/ for info on the grid layout -->
+ <!-- See http://developer.yahoo.com/yui/ for info on the reset, font and base css -->
+ <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">
- <!-- Load the Timeline library after reseting the fonts, etc -->
- <script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
-
- <link rel="stylesheet" href="local_example.css" type="text/css">
+ <script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
+ <link rel="stylesheet" href="local_example.css" type="text/css">
+ <script src="derpy_timeline_data.js" type="text/javascript"></script>
- <!-- Since we don't have our own server, we do something tricky and load our data here as if it were a library file -->
- <script src="derpy_timeline_data.js" type="text/javascript"></script>
-
- <script>
+ <script>
var tl;
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource = 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(2010, 10, 1));
- theme1.timeline_stop = new Date(Date.UTC(2012, 5, 1));
-
- var d = Timeline.DateTime.parseIso8601DateTime('2012-02-25');
+
+ var theme = Timeline.ClassicTheme.create();
+ theme.autoWidth = true;
+ theme.timeline_start = new Date(Date.UTC(2008, 10, 1));
+ theme.timeline_stop = new Date(Date.UTC(2012, 5, 1));
+
+ var d = Timeline.DateTime.parseIso8601DateTime("2012-02-25");
var bandInfos = [
Timeline.createBandInfo({
- eventSource: eventSource,
- date: d,
- width: 200,
- intervalUnit: Timeline.DateTime.DAY,
- intervalPixels: 100,
- theme: theme1,
- layout: "original"
+ eventSource: eventSource,
+ date: d,
+ width: 200,
+ intervalUnit: Timeline.DateTime.DAY,
+ intervalPixels: 50,
+ theme: theme,
+ layout: "original"
}),
Timeline.createBandInfo({
- eventSource: eventSource,
- date: d,
- width: 100,
- intervalUnit: Timeline.DateTime.MONTH,
- intervalPixels: 200,
- theme: theme1,
- layout: "overview"
+ eventSource: eventSource,
+ date: d,
+ width: 100,
+ intervalUnit: Timeline.DateTime.MONTH,
+ intervalPixels: 200,
+ theme: theme,
+ layout: "overview"
})
];
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
- eventSource.loadJSON(timeline_data, url); // The data was stored into the
- // timeline_data variable.
- tl.layout(); // display the Timeline
+ var url = ".";
+ eventSource.loadJSON(timeline_data, url);
+ tl.layout();
}
-
+
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
@@ -74,28 +63,28 @@
}, 500);
}
}
- </script>
+ </script>
-</head>
-<body onload="onLoad();" onresize="onResize();">
-<div id="doc3" class="yui-t7">
- <div id="hd" role="banner">
- <h1>Derpy Hooves Timeline</h1>
- <p>Only Doctor Whooves can save us: He’s out there, burning through time, facing a thousand dangers across the stars and <a href="http://www.savederpy.com/petition/">never giving up</a>.</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='http://www.simile-widgets.org/timeline/'>Simile Timeline project</a>. Timeline version <span id='tl_ver'></span></p>
- <script>Timeline.writeVersion('tl_ver')</script>
- </div>
+</head>
+<body onload="onLoad();" onresize="onResize();">
+<div id="doc3" class="yui-t7">
+ <div id="hd" role="banner">
+ <h1>Derpy Hooves Timeline</h1>
+ <p>Only Doctor Whooves can save us: He’s out there, burning through time, facing a thousand dangers across the stars and <a href="http://www.savederpy.com/petition/">never giving up</a>.</p>
+ </div>
+ <div id="bd" role="main">
+ <div class="yui-g">
+ <div id='tl'></div>
+ <p>To move the timeline, use the scroll wheel, the arrow keys, or drag it.</p>
+ </div>
+ </div>
+ <div id="ft" role="contentinfo">
+ <p>Thanks to the <a href='http://www.simile-widgets.org/timeline/'>Simile Timeline project</a>. Timeline version <span id='tl_ver'></span></p>
+ <script>Timeline.writeVersion('tl_ver')</script>
+ </div>
</div>
-
-</body>
+
+</body>
</html>
View
37 derpy_timeline_data.js
@@ -1,15 +1,26 @@
var timeline_data = {
- 'dateTimeFormat': 'iso8601',
- 'events': [
- {
- 'start': '2010-10-10',
- 'durationEvent': false,
- 'title': 'Derpy’s Debute',
- 'description': 'Derpy is first seen on screen in Friendship is Magic, part 1.'
- }, {
- 'start': '2012-02-25',
- 'durationEvent': false,
- 'title': 'Derpy’s Demise',
- 'description': 'The censored version of The Last Roundup appears on iTunes.'
- }]
+ 'dateTimeFormat': 'iso8601',
+ 'events': [
+ {
+ 'start': '2010-10-10',
+ 'durationEvent': false,
+ 'title': 'Debute',
+ 'description': 'Derpy is first seen on screen in Friendship is Magic, part 1.'
+ }, {
+ 'start': '2010-10-25',
+ 'durationEvent': false,
+ 'title': 'Naming',
+ 'description': 'Dr. Foreigner on /co/ gives Derpy Hooves her name.'
+ }, {
+ 'start': '2012-01-21',
+ 'durationEvent': false,
+ 'title': 'Canonization',
+ 'description': 'Derpy becomes more canon than she already was by being called by her name in The Last Roundup.'
+ }, {
+ 'start': '2012-02-25',
+ 'durationEvent': false,
+ 'title': 'Abduction',
+ 'description': 'The censored version of The Last Roundup appears on iTunes.'
+ }
+ ]
}

0 comments on commit 555879a

Please sign in to comment.
Something went wrong with that request. Please try again.