Create Beautiful, Interactive Timelines With jQuery and HTML5


Timeframe is a library for creating a beautiful and interactive timeline using jQuery and HTML5.

simple horizontal timeline css, dynamic horizontal timeline, draw a timeline, timeline drawing examples

How to make use of it:

1. Load the jQuery JavaScript library and the jQuery timeframe.js script into the project.

<script src="//"></script>
<script src="lib/timeframe.js"></script>

2. Create an empty element that acts as a container for your timeline.

<div id="timeframe"></div>

3. Add your own custom events to the timeline.

var starWarsFilms = {
  name: "Star Wars Films",
  color: "#000000",
  events: [
      name: "A New Hope",
      date: "1977-05-25"
      name: "The Empire Strikes Back",
      date: "1980-05-21"
      name: "Return of the Jedi",
      date: "1983-05-25"

4. Set a start/end date and draw a timeline inside the empty container you just created.

var t = Timeframe("#timeframe")

5. Default options.

tickHeight: 8,
extHeight: 10

Drawing A Simple Horizontal Timeline, timeframejs Plugin/Github

See Demo And Download

Official Website(andrewjensen): Click Here

This superior jQuery/javascript plugin is developed by andrewjensen. For extra advanced usage, please go to the official website.