jqTimeline - A jQuery plug-in by Samuel Rouse

About jqTimeline

jqTimeline originated as an idea to easily interact with a set of time-based revisions on a group management system for a social media site. The site doesn't exist yet, but what started as a quick drawing in Photoshop turned into a functional plugin.

Because jqTimeline relies on CSS for appearance, the design is very light and extremely flexible. The basic implementation uses no graphics, and most of the stylesheet is to make a pretty CSS3 gradient background.

Options

width: Number, Optional
The width of the timeline. If not supplied, the existing box width is used.
prefix: String, Optional
A unique prefix applied to the IDs of child elements. Automatically generated if not supplied.
endpoints: Boolean, Optional
Whether the line should have endpoints. Default is true.
tlStart: Date, Optional
The date the timeline starts on. Used to calculate distance on the timeline. Default is 01/01/2000
tlEnd: Date, Optional
The date the timeline ends on. Used to calculate distance on the timeline. Default is now.

Example

Hover over a dot to see more information. Click a dot to keep it open. Double-click the timeline to expand or collapse it.

Data Format

jqTimeline accepts a JSON object with a data element referring to an array of points, or the direct array of points. You can also provide a URL and it will fetch data a JSON object.

Each point is a JSON object (hash) with the following information

id: String, Required
the id (with a timeline-specific prefix added) of the point's div.
title: String, Required
A label for the element.
start: Various, Required
Starting position on the timeline. Can be a position (Number), a percentage (String ending in %), or Date.
end: Various, Optional
Ending position on the timeline. Can be a position (Number), a percentage (String ending in %), or Date. May also be "end" to run to the end of the timeline (and not show an endpoint)
showEnd: Boolean, Optional
Show the endpoint if one exists. Default is true.
color: String, Optional
Color of the point. Can be any color value. Default is set in CSS.
content: String, Optional
The text or HTML content of a point, visible on mouseover. Later revisions will permit AJAX loading of data using a URL in this field.
type: String, Optional
The type of data contained in the content field. Not currently used.