Use your left/right keys to browse tutorials
Create an Animated Timeline with jQuery

Create an Animated Timeline with jQuery

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 30, 2013

I’ve been meaning to write about this plugin for some time but never got around to it until now! This great plugin written by csslab.cl helps you beautifully present timelines and has support for both horizontal and vertical layouts.

jQuery Timelinr

After including the timelinr.js plugin file, to get it working all you need to do is call the basic method below and include the setup HTML at the bottom of the page. Checkout the horizontal and vertical demos

chrome-book


$(function(){
   $().timelinr();
});


$(function(){
   $().timelinr({
      orientation: 'horizontal',
      // value: horizontal | vertical, default to horizontal
      containerDiv: '#timeline',
      // value: any HTML tag or #id, default to #timeline
      datesDiv: '#dates',
      // value: any HTML tag or #id, default to #dates
      datesSelectedClass: 'selected',
      // value: any class, default to selected
      datesSpeed: 'normal',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
      issuesDiv : '#issues',
      // value: any HTML tag or #id, default to #issues
      issuesSelectedClass: 'selected',
      // value: any class, default to selected
      issuesSpeed: 'fast',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
      issuesTransparency: 0.2,
      // value: integer between 0 and 1 (recommended), default to 0.2
      issuesTransparencySpeed: 500,
      // value: integer between 100 and 1000 (recommended), default to 500 (normal)
      prevButton: '#prev',
      // value: any HTML tag or #id, default to #prev
      nextButton: '#next',
      // value: any HTML tag or #id, default to #next
      arrowKeys: 'false',
      // value: true/false, default to false
      startAt: 1,
      // value: integer, default to 1 (first)
      autoPlay: 'false',
      // value: true | false, default to false
      autoPlayDirection: 'forward',
      // value: forward | backward, default to forward
      autoPlayPause: 2000
      // value: integer (1000 = 1 seg), default to 2000 (2segs)< });
   });

The HTML


<div id="timeline">
   <ul id="dates">
      <li><a href="#2013">2013</a></li>
      <li><a href="#2014">2014</a></li>
   </ul>
   <ul id="issues">
      <li id="2013">
<h1>Title</h1>
         <p>Lorem ipsum.</p>
      </li>
      <li id="2014">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <!-- optional buttons -->
   <a href="#" id="next">Next</a>
   <a href="#" id="prev">Previous</a>
</div>

Demo Download



More tutorials from Papermashup
  • http://www.webdesigners.my web designer Malaysia

    I never think of timeline can be presented in this way. Your Jquery code is clean and compact! Thanks for sharing.