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) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.

 

Demos

The "Future" theme demo shows some of the possibilities of using your own custom CSS.

Into the Future

 

The original demo features two working examples, which show several key features including expand/collapse, autostart/autoload, and multiple timelines per page.

Original Demo

 

Timeliner.js was first implemented on InvestigatingPower.org.

McCarthyism | Civil Rights | Vietnam | Watergate | Corporate Power | Post 9/11

 

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="timeline" class="timeline-container">
	<div class="timeline-wrapper">
		<h2 class="timeline-time">1976</h2>
		<dl class="timeline-series">
			<dt class="timeline-event" id="event01"><a>Event</a></dt>
			<dd class="timeline-event-content" id="event01EX">
				<p>Content about the event goes here.</p>
			</dd>
			<dt class="timeline-event" id="event02"><a>Another Event</a></dt>
			<dd class="timeline-event-content" id="event02EX">
				<p>Content about the other event.</p>
			</dd>
		</dl>

	</div>
</div>

 

Source/Credits

The content used in the original demo is from InvestigatingPower.org, one of two initial places where I implemented timeliner. 

 

Accessibility

The original 1.0 version was also fully accessible and 508 compliant as of its original production (mid-2000s). Accessibility technologies have since changed as have coding practices to address accessibility (e.g., the adoption of ARIA). It is recommended that you review your own implementation to ensure accessiblity if that is a requirement of your project. I hope to re-review and update the plugin's native accessiblity at a later date.

 

License

What's most important to me is that you try to let me know if you implement it somewhere so I can take a peek.

License

Timeliner by Tarek Anandan, version 2.x+, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Timeliner.js, version 1.x, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

blog comments powered by Disqus

Get in Touch

Question, comment or request? Send me a note.