Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) fully accessible and 508 compliant (an original requirement) (2) simple, (3) able to handle nearly any form of content, and (4) printer friendly. As of July 2013, it also comes packed with an optional responsive stylesheet for use with mobile devices less than 480px wide. Finally, there's plenty of room for you to get creative with the styling. (Please drop me a line if you do do something cool with it.)
Get the latest version, as well as full usage instructions, from my Timeliner GitHub repo. Fork away.
A timeline with only one major marker and two events would look like this:
<div id="timelineContainer"> <div class="timelineMajor"> <h2 class="timelineMajorMarker">Major Marker</h2> <dl class="timelineMinor"> <dt id="event01"><a>Event</a></dt> <dd class="timelineEvent" id="event01EX" style="display: none; "> <p>Content about the event goes here.</p> </dd><!-- /.timelineEvent --> </dl><!-- /.timelineMinor --> <dl class="timelineMinor"> <dt id="event02"><a>Another Event</a></dt> <dd class="timelineEvent" id="event02EX" style="display: none; "> <p>Content about the other event.</p> </dd><!-- /.timelineEvent --> </dl><!-- /.timelineMinor --> </div><!-- /.timelineMajor --> </div><!-- /#timelineContainer -->
The content used in the demo is from InvestigatingPower.org, one of two initial places where I implemented timeliner. InvestigatingPower.org features a total of five timeliner-powered timelines covering the topics of McCarthyism, Civil Rights, the Vietnam War, the Watergate Scandal, Corporate Power (Tobacco), and Post 9/11.
Normally I wouldn't even bother with this kind of stuff, but someone asked, so here goes. Really all that's important to me is that you try to let me know if you implement it somewhere so I can take a peek.
Timeliner by Tarek Anandan is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.