forked from technotarek/timeliner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
timeliner.html
291 lines (248 loc) · 17.3 KB
/
timeliner.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Timeliner.js Demo</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/timeliner.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="inc/colorbox.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<h1>Timeliner</h1>
<p class="lead">Working examples of the timeliner.js jquery plugin. This page features two working examples, which demonstrate several key features including expand/collapse, autostart/autoload, and multiple timelines per page. Also see the <a href="demo-future/timeliner-future.html">newer "Future" demo</a>, released along with version 2.0 of this plugin.</p>
<h2>The Civil Rights Movement 1954-1964</h2>
<p>The content used in this demo is from <a href="http://www.technotarek.com/case-studies/investigating-power">InvestigatingPower.org</a>, one of two initial places where I implemented timeliner. InvestigatingPower.org features a total of five timeliner-powered timelines covering the topics of <a href="http://www.investigatingpower.org/timelines/mccarthyism/" target="_blank">McCarthyism</a>, <a href="http://www.investigatingpower.org/timelines/civil-rights/" target="_blank">Civil Rights</a>, <a href="http://www.investigatingpower.org/timelines/vietnam/" target="_blank">the Vietnam War</a>, <a href="http://www.investigatingpower.org/timelines/watergate/" target="_blank">the Watergate Scandal</a>, <a href="http://www.investigatingpower.org/timelines/corporate-power/" target="_blank">Corporate Power (Tobacco)</a>, and <a href="http://www.investigatingpower.org/timelines/9-11/" target="_blank">Post 9/11</a>.</p>
<div id="timeline" class="timeline-container">
<button class="timeline-toggle">+ expand all</button>
<br class="clear">
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1954</span></h2>
<dl class="timeline-series">
<dt id="19540517" class="timeline-event"><a>Brown v. Board of Education</a></dt>
<dd class="timeline-event-content" id="19540517EX">
<h3>May 17, 1954</h3>
<p>
The U.S. Supreme Court hands down a unanimous 9-0 decision in the Brown v. Board of Education of Topeka case, opening the door for the civil rights movement and ultimately racial integration in all aspects of U.S. society. In overturning Plessy v. Ferguson (1896), the court rules that “separate educational facilities are inherently unequal.”</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1955</span></h2>
<dl class="timeline-series">
<dt id="19550828" class="timeline-event"><a>Emmett Till</a></dt>
<dd class="timeline-event-content" id="19550828EX">
<h3>August 28, 1955</h3>
<div class="media">
<a href="#inline-1955-08-282" class="CBmodal"><img src="http://img.youtube.com/vi/GU1wuqyOP98/0.jpg" width="240" height="180" alt="Related Video: The Emmett Till Murder"></a>
<p class="mediaLink"><a href="#inline-1955-08-282" class="CBmodal" title="Related Video: The Emmett Till Murder">Watch: The Emmett Till Murder</a></p>
<div style="display:none">
<div id="inline-1955-08-282" class="modalBox">
<object>
<param name="movie" value="http://www.youtube.com/v/GU1wuqyOP98?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/GU1wuqyOP98?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
</object>
</div>
</div>
</div><!-- /.media -->
<p>
Fourteen-year-old African-American Emmett Till is brutally murdered after reportedly flirting with a white woman while visiting relatives in Mississippi. For the first time, both black and white reporters cover the trial epitomizing "one of the most shocking and enduring stories of the twentieth century." The white defendants, Roy Bryant and J.W. Milam, are acquitted by an all-white jury in only 67 minutes; later they describe in full detail to Look magazine (which paid them $4,000) how they killed Till. His mother insists on an open casket funeral, and the powerful image of his mutilated body sparks a strong reaction across the country and the world.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
<dt id="19551201" class="timeline-event"><a>Rosa Parks</a></dt>
<dd class="timeline-event-content" id="19551201EX">
<h3>December 1, 1955</h3>
<p>
The arrest of Rosa Parks, a 42-year-old African-American seamstress and civil rights activist who refused to give up her bus seat to a white passenger, sets off a long anticipated bus boycott by residents of Montgomery, Ala. The 13-month protest and ensuing litigation eventually make it to the U.S. Supreme Court, which declares that segregation on public buses is unconstitutional. The Montgomery bus boycott brings the Rev. Dr. Martin Luther King Jr. and his nonviolent approach to social change to the forefront of the civil rights movement.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1957</span></h2>
<dl class="timeline-series">
<dt id="19570904" class="timeline-event"><a>Little Rock</a></dt>
<dd class="timeline-event-content" id="19570904EX">
<h3>September 4, 1957</h3>
<div class="media">
<a href="#inline-1957-09-044" class="CBmodal"><img src="http://img.youtube.com/vi/h148GEIgUeA/0.jpg" width="240" height="180" alt="Related Video: Reporting Little Rock"></a>
<p class="mediaLink"><a href="#inline-1957-09-044" class="CBmodal" title="Related Video: Reporting Little Rock">Watch: Reporting Little Rock</a></p>
<div style="display:none">
<div id="inline-1957-09-044" class="modalBox">
<object>
<param name="movie" value="http://www.youtube.com/v/h148GEIgUeA?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/h148GEIgUeA?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
</object>
</div>
</div>
</div><!-- /.media -->
<p>
Three years removed from the Brown v. Board of Education decision, Arkansas Gov. Orval Faubus orders the National Guard to stop nine black students from attending the all-white Little Rock Central High School. President Dwight D. Eisenhower intervenes by federalizing the National Guard and deploying Army troops to protect the students, stripping the state of power. Media coverage of the physical and verbal harassment the black students were subjected to is reported and broadcast around the world. In the end, they successfully integrate Central High.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1961</span></h2>
<dl class="timeline-series">
<dt id="19610504" class="timeline-event"><a>Freedom Rides</a></dt>
<dd class="timeline-event-content" id="19610504EX">
<h3>May 4, 1961</h3>
<div class="media">
<a href="#inline-1961-05-045" class="CBmodal"><img src="http://img.youtube.com/vi/Sxe9dJoZ-AQ/0.jpg" width="240" height="180" alt="Related Video: Freedom Rides"></a>
<p class="mediaLink"><a href="#inline-1961-05-045" class="CBmodal" title="Related Video: Freedom Rides">Watch: Freedom Rides</a></p>
<div style="display:none">
<div id="inline-1961-05-045" class="modalBox">
<object>
<param name="movie" value="http://www.youtube.com/v/Sxe9dJoZ-AQ?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/Sxe9dJoZ-AQ?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
</object>
</div>
</div>
</div><!-- /.media -->
<p>
The first of many civil rights “Freedom Rides” leaves Washington, D.C., for New Orleans. The Freedom Riders want to test the validity of the Supreme Court’s decision to outlaw racial segregation in bus terminals and through interstate bus travel. Angry white mobs – with the blessing of Alabama law enforcement – meet the convoy in Anniston and Birmingham, brutally beating the Freedom Riders and firebombing one of the buses.<sup>7</sup></p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1963</span></h2>
<dl class="timeline-series">
<dt id="19630828" class="timeline-event"><a>"I Have a Dream"</a></dt>
<dd class="timeline-event-content" id="19630828EX">
<h3>August 28, 1963</h3>
<div class="media">
<a href="#inline-1963-08-287" class="CBmodal"><img src="http://img.youtube.com/vi/gvAQE66jwcg/0.jpg" width="240" height="180" alt="Related Video: Black Press"></a>
<p class="mediaLink"><a href="#inline-1963-08-287" class="CBmodal" title="Related Video: Black Press">Watch: Black Press</a></p>
<div style="display:none">
<div id="inline-1963-08-287" class="modalBox">
<object>
<param name="movie" value="http://www.youtube.com/v/gvAQE66jwcg?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/gvAQE66jwcg?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
</object>
</div>
</div>
</div><!-- /.media -->
<p>
In one of the largest gatherings in the nation’s capital and one of the first to be broadcast live on national television, at least 200,000 civil rights protesters stage a March on Washington concluding at the Lincoln Memorial. The march is dedicated to jobs and freedom and takes place 100 years after the Emancipation Proclamation. The highlight of the event is Martin Luther King Jr.’s historic “I Have a Dream” speech.</p>
<blockquote>
I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal."
<div class="attribution">—Martin Luthar King Jr.</div>
</blockquote>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="timeline-time"><span>1964</span></h2>
<dl class="timeline-series">
<dt id="19640702" class="timeline-event"><a>Civil Rights Act</a></dt>
<dd class="timeline-event-content" id="19640702EX">
<h3>July 2, 1964</h3>
<p>
President Lyndon B. Johnson signs the Civil Rights Act of 1964, mandating equal opportunity employment, and complete desegregation of schools and other public facilities. It also outlaws unequal voter registration requirements. Although it would take years for these changes to take effect in communities around the country, the law is a monumental victory for the civil rights movement.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
<dt id="19641014" class="timeline-event"><a>Nobel Peace Prize</a></dt>
<dd class="timeline-event-content" id="19641014EX">
<h3>October 14, 1964</h3>
<p>Martin Luther King Jr. is awarded the Nobel Peace Prize; at 35, he is the youngest recipient.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<br class="clear">
</div><!-- /#timelineContainer -->
<br>
<br>
<h2>The Development of Timeliner.js</h2>
<p>Your content isn't suited for a chronological presentation? No problem, get creative.</p>
<p>The timeline below demonstrates some of the plugin's options including the oneOpen feature and semantic class customizations (see source code).
<div id="timeline-js" class="timeline-container">
<button class="timeline-toggle">+ expand all</button>
<br class="clear">
<div class="timeline-wrapper">
<h2 class="milestone"><span>Concept</span></h2>
<dl class="timeline-series">
<dt id="born" class="timeline-event"><a>The idea is born</a></dt>
<dd class="timeline-event-content" id="bornEX">
<p>Two completely independent projects, one for the Institute for Educational Leadership and another for the Fund for Investigative Journalism, expressed interest in a timeline component for their website.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="milestone"><span>Prototype</span></h2>
<dl class="timeline-series">
<dt id="realized" class="timeline-event"><a>The idea is realized</a></dt>
<dd class="timeline-event-content" id="realizedEX">
<p>Jquery was heating up, so it was the perfect time to put together a working prototype. I toyed around with some variations, including some horizontal ones. Ultimately, I found the vertical version, similar to the current, the most flexible.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="milestone"><span>Initial Integrations</span></h2>
<dl class="timeline-series">
<dt id="ncld" class="timeline-event"><a>NCLD-Youth Disability History Timeline</a></dt>
<dd class="timeline-event-content" id="ncldEX">
<p>The initial working code was first launched at <a href="http://www.ncld-youth.info/index.php?id=61">http://www.ncld-youth.info/index.php?id=61</a>. This version actually has come features that I like that I never implmented in the final plugin (e.g,. century > decade > year/event).</p>
<br class="clear">
</dd><!-- /.timeline-event -->
<dt id="power"><a>Investigating Power's Moments of Truth Timelines</a></dt>
<dd class="timeline-event-content" id="powerEX">
<p>I really started to fine tune the code for InvestigatingPower.org. This was also the first time where all of the content was loaded via the <abbr title="content management system">CMS</abbr>, which was important given five timelines for a total of a few hundred data points.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<div class="timeline-wrapper">
<h2 class="milestone"><span>Open Sourced</span></h2>
<dl class="timeline-series">
<dt id="github" class="timeline-event"><a>GitHub Gets the Timeliner.js Jquery Plugin</a></dt>
<dd class="timeline-event-content" id="githubEX">
<p>I wanted to play around with GitHub. I wanted to learn some more Jquery, in particular a bit more about creating a plugin. Done.</p>
<br class="clear">
</dd><!-- /.timeline-event-content -->
</dl><!-- /.timeline-series -->
</div><!-- /.timeline-wrapper -->
<br class="clear">
</div>
</div><!-- /.container -->
<div class="container">
<a href="http://www.investigatingpower.org"><img src="http://www.investigatingpower.org/images/logo_truth_collapsed.jpg" width="940" alt="Investigating Power" /></a>
</div>><!-- /.container -->
<!-- GLOBAL CORE SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="inc/colorbox.js"></script>
<script type="text/javascript" src="js/timeliner.js"></script>
<script>
$(document).ready(function() {
$.timeliner({
startOpen:['#19550828', '#19630828'],
});
$.timeliner({
timelineContainer: '#timeline-js',
timelineSectionMarker: '.milestone',
oneOpen: true,
startState: 'flat',
expandAllText: '+ Show All',
collapseAllText: '- Hide All'
});
// Colorbox Modal
$(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:682, initialHeight:100, transition:"elastic",speed:750});
});
</script>
</body>
</html>