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
Comments
11 discussions around Create an Animated Timeline with jQuery
  1. Zach Smith says:

    I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours.

  2. m says:

    Hey

    I’m making an iphone app and was wondering how would I include the plug in file and implement the code in to to my app code, I’m a newby to this tech stuff so am I kind of stuck but willing to learn

    Thanks

  3. Loi dich says:

    Very good, thanks for share at all, I’m using it on my site

  4. Alex says:

    Goodness!!! Finally I found a timeline snippet that does what I want it to do and easy to customise. Thanks for sharing.

  5. Tyler says:

    Smooth like butter, but check out http://css-tricks.com/ids-cannot-start-with-a-number/. You shouldn’t start ID’s out with a number!

  6. dinhtiepict says:

    verry good :D. thank you

  7. sonu sindhu says:

    Very nice such a great blog

  8. Nahuel says:

    It’s great, but it never stops! I can’t even read the items :P

    It should stop on hover or something like that.

  9. Great share! I’ve always wanted to try an animated timeline. This one looks incredibly solid and well thought-out.

  10. I keep getting your 404 page when hitting the Download button for the ZIP.





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.