-
Notifications
You must be signed in to change notification settings - Fork 1
/
timeline.html
74 lines (64 loc) · 2.56 KB
/
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
<head>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" /><!-- 1 -->
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" href="timeline.css">
<link rel="stylesheet" href="navBar.css">
<link rel="icon" type="image/png" href="./favicon.png" />
<script>
var markers = [];
window.onload = function(){
$.ajax({
url: 'http://localhost:3000/',
success: function(data) {
console.log('success');
console.log(data);
setupPage(data);
},
error: function(data) {
console.log('error');
console.log(data);
document.getElementById("timeline-embed").style.display = "none";
document.getElementById("timeline-temp").style.display = "block";
// two arguments: the id of the Timeline container (no '#')
// and the JSON object or an instance of TL.TimelineConfig created from
// a suitable JSON object
//window.timeline = new TL.Timeline('timeline-embed', 'marktwain_test.json');
}
});
}
function setupPage(data)
{
window.timeline = new TL.Timeline('timeline-embed', data);
}
function markerClicked(e)
{
for(var i = 0; i < markers.length; i++)
{
if (markers[i] == e.target)
{
window.timeline.goTo(i);
}
}
}
</script>
</head>
<body>
<a href="./"> <img src="img/jpp-logo2.png" alt="JPP Logo" style="margin-left:15%;" /></a>
<ul class="topnav">
<li><a href="browse.html?category=people">People</a></li>
<li><a href="browse.html?category=toys">Toys</a></li>
<li><a href="browse.html?category=companies">Companies</a></li>
<li><a href="./timeline.html">Timeline</a></li>
<li><a href="players.html">The Players</a></li>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="submitEntry.html">Submit</a></li>
</ul>
<div class="timeline">
<div id='timeline-embed'></div>
<iframe id='timeline-temp' style='display:none' src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1-oQByBfIlL0PwvcxEEpSzQNDwXY9qPLQM7PKmWBK9aM&font=Default&lang=en&initial_zoom=2&height=650' frameborder='0' ></iframe>
</div>
</body>