timeline

Usage

1. Include screen.css and timeliner.js (or timeliner.min.js).
2. Wrap your timeline in an element with an ID of timelineContainer:

   <div id="timelineContainer">Your Timeline Content</div>

   You can set your own container using the plugin's options
3. Separate the major marker content (e.g., content for each century, year, decade etc) into elements with a class of timelineMajor:

   <div class="timelineMajor"></div>

4. Wrap the major markers in an element with a class of 'timelineMajorMarker':

   <h2 class="timelineMajorMarker">1954</h2>

5. Separate the individual events into DL elements with a class of timelineMinor:

   <dl class="timelineMinor">

6. Wrap the title of the individual events in a DT and A tag; give each DT a unique ID:

   <dt id="19540517">
   	<a>Brown vs Board of Education</a>
   </dt>

7. Wrap the (hidden) content of each event in a DL tag; give each DL an ID based on the DT with 'EX' appended, a class of 'timeline', and set the display to 'none':

   <dl><dd class="timelineEvent" id="19540517EX" style="display: none; ">

8. Instantiate:

   $.timeliner();

   Or, instantiate with options:

   $.timeliner({ 
   	timelineContainer: '#timelineContainer', // value: selector of the main element holding the timeline's content, default to #timelineContainer 
   
   	startState: 'closed', // value: closed | open, default to closed; determines whether the timeline is initially collapsed or fully expanded 
   
   	baseSpeed: 200 // value: any integer, default to 200; determines the base speed, some animations are a multiple (4x) of the base speed 
   });

9. Optional: Add an expand/collapse all events by adding the following inside of the main #timelineContainer:

   <div class="timelineToggle">
   	<p>
   		<a class="expandAll">+ expand all</a>
   	</p>
   </div>
   

Sample

A timeline with only one major marker and one event 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 -->
	</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.

download https://github.com/technotarek/timeliner