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.
The "Future" theme demo shows some of the possibilities of using your own custom CSS.
The original demo features two working examples, which show several key features including expand/collapse, autostart/autoload, and multiple timelines per page.
Timeliner.js was first implemented on InvestigatingPower.org.
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="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>
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.
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.
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