Draggable Horizontal Timeline Plugin - jQuery JST Timeline

File Size: 8.13 KB
Views Total: 6838
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Draggable Horizontal Timeline Plugin - jQuery JST Timeline

JST Timeline is a small, dynamic, draggable jQuery timeline plugin which arranges events with dates and custom icons in a straight line.

Requirements:

  • jQuery
  • Moment.js
  • An iconic font. E.g. Font Awesome.

How to use it:

1. Load the necessary jQuery and moment.js libraries in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Load an iconic font of your choice in the document.

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

3. Create a placeholder for the timeline.

<div id="timeline"></div>

4. Create an array of events as follows:

const myData = [{ 
      label: "My Event 1", 
      date: "11-02-2012", 
      id: 1, // unique ID
      iconClass: "", // icon class
      iconId: 1, // icon id defined in the option
      customClass: "" // custom class
    },{ 
      label: "My Event 2", 
      date: "11-02-2015", 
      id: 2,
      iconClass: "",
      iconId: 2,
      customClass: "" 
    },{ 
      label: "My Event 3", 
      date: "11-02-2018", 
      id: 3,
      iconClass: "", 
      iconId: 3, 
      customClass: ""
    }
    // more events here
];

5. Generate a default timeline inside the placeholder element.

$("#timeline").loadTimeline(myData);

6. Determine whether to show the dates with no events. Default: null.

$("#timeline").loadTimeline(myData,{
  showEmptyDates: false
});

7. Define the icon classes in the option.

$("#timeline").loadTimeline(myData,{
  iconClasses: {
    0: "fas fa-layer-group",
    1: "fas fa-wrench",
    2: "fas fa-user-plus",
    3: "far fa-paper-plane",
    4: "fas fa-user-minus"
  }
});

8. Customize the date format.

$("#timeline").loadTimeline(myData,{
  momentFormat: 'DD/MM/YYYY',
  dataShowFormat: 'DD/MM/YYYY'
});

9. Scroll the timeline to a specific date.

$("#timeline").goToDate("11/02/2015");

Changelog:

v1.0.34 (2019-05-24)

  • Font size of box description changed for 12px

2019-05-23

  • Added CSS property to handle text size

2019-05-03

  • Bugfix

2019-04-27

  • Enabled smooth scroll for goToData method

This awesome jQuery plugin is developed by justapagamentos. For more Advanced Usages, please check the demo page or visit the official website.