-
Notifications
You must be signed in to change notification settings - Fork 0
/
derpy_timeline.html
88 lines (77 loc) · 3.28 KB
/
derpy_timeline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Derpy Hooves Timeline</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 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">
<style type="text/css"></style>
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
<script src="derpy_timeline_data.js" type="text/javascript"></script>
<script type="text/javascript">
SimileAjax.History.enabled = false;
var tl;
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.autoWidth = true;
var d = Timeline.DateTime.parseIso8601DateTime("2012-01-20");
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "2012-01-12",
width: 200,
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 50,
theme: theme,
layout: "original"
}),
Timeline.createBandInfo({
eventSource: eventSource,
width: 100,
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100,
theme: theme,
layout: "overview"
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
var url = ".";
eventSource.loadJSON(timeline_data, url);
tl.layout();
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="doc3" class="yui-t7">
<div id="hd" role="banner">
<h1>Derpy Hooves Timeline</h1>
<p>See also <a href="http://derpyhoovesnews.com">Derpy Hooves News</a> and <a href="http://www.savederpy.com">Save Derpy</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>
</html>