jquery.timeline is a very light and easy-to-use jQuery plugin that creates a dynamic columnar timeline from a set of events stored in a data object.

How to make use of it:

1. Embed jQuery and jQuery UI on your HTML page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Create an empty div to serve as a container for the timeline widget.

<div id="element"></div>

3. Prepare an array of event data, call the timeline() method and the timeline.

$("#element").timeline({

data: [{
  time: new Date(),
  color: '#555',
  css: 'success',
  content: 'Hello Timeline'
  }]

});

4. Add a timed event using the add method.

$("#element").timeline("add",[{
  time: new Date(),
  css: 'success',
  content: 'Hello Again'}]
);

5. Destroy the timeline.

$("#element").timeline("destroy");

See Demo And Download

Official Website(yehiasalam): Click Here

This superior jQuery/javascript plugin is developed by yehiasalam. For extra Advanced Usage, please go to the official website.