Timeliner.js - A jQuery plugin for making simple historical timelines

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. There's also plenty of room for you to get creative with the styling. (Please drop me a line if you do do something cool with it.)

Demo

Timeliner Demo: Civil Rights Timeline

Download

Get the latest version, as well as full usage instructions, from my Timeliner GitHub repo. Fork away.

Sample

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 -->

Source/Credits

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.

License

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.

blog comments powered by Disqus