Awesome jQuery-based responsive timeline generator

If you want to add time line feature in your website like facebook, Then here i am going to introduce awesome jQuery-based responsive timeline generator plugin created by RyanFitzgerald, With the help of this plugin you can easily create vertical static and dynamic timeline which may display your life journey or your profession or company journey with more attractive manner.
Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin.
jquery-timeline


Integration of jQuery-based responsive timeline generator on your website

First you need to add required dependent CSS, JS libraries on page

<!-- CSS -->
<link rel="stylesheet" href="vertical-timeline.css">
 
<!-- JS -->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="vertical-timeline.min.js"></script>

HTML

In this section add html which need to use as timeline, Add data-vtdate attribute on div to display date along with timeline paragraph.

<div id="timeline">
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>



jQuery

Action time..!! finally add verticalTimeline() function on page to make your timeline actionable.

<script>
$(function() {  
  $('#timeline').verticalTimeline();
 }); 
</script>

Timeline has a few options that can be customized to suite your specific needs. The included options that can be utilized are:

<script>
$(function() {  
  $('#timeline').verticalTimeline({
    startLeft: false,
    alternate: true,
    animate: "fade", // or slide
    arrows: false
 }); 
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and customization.



One Reply to “Awesome jQuery-based responsive timeline generator”

  1. This looks neat to start with, but it’s really just a crude layout hack. I think a timeline should have some sense of scale, and the distance between January 2016 and March 2016 in your example should be far smaller than the one between March 2016 and September 2016 (but it’s not). I’m guessing that the divs aren’t ordered by the script, so if I jumbled the order in the code so that it wasn’t chronological (or pulled it from an unordered database table) then it wouldn’t order and scale he elements correctly. I’m wondering what the jQuery is for at all- surely you could do this with CSS alone.
    It’s a shame. It looked neat on first glance.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.