Press "Enter" to skip to content

Fully Customizable jQuery Plugin for Dynamic Timeline Generation | Horizontal Timeline 2.0

Horizontal Timeline 2.0, is a fully customizable jQuery modification of text originally created by CodyHouse, to create a dynamic timeline on the horizontal axis.

horizontal timeline slider, responsive horizontal timeline jquery, horizontal timeline with swiper, timeline slider javascript, horizontal timeline

Version 2.0 adds functionality that was pre-ordered for the original version and more:

  • Switch to a jQuery plugin, with support for multiple timeline instances using identifiers.
  • Regular event date intervals replace the scattered spaced pattern, with the option of a minimum first date interval.
  • Previous/next swipe left/next buttons have been renamed to reflect their functionality, Previous/Next buttons added to change event content, Added option to disable buttons completely, and implement new inactive button states
  • Setup is now easier with minimal HTML, allowing the timeline to be created dynamically according to the total amount of event content, which has natural request support and vice versa.
  • Event dates can now be displayed in different types: dateTime, date, time, dayMonth, monthYear, year, with fully customizable display text, and a new option to reverse advanced order and selection of events.
  • A new autoplay feature with a progress bar, pause/play buttons, adjustable speed, and pause function on hover has been added, with an additional option to set different speeds based on each event.
  • Added a new timeline link with a customizable scroll function.
  • Added support for mouse wheel scrolling, touch and scrolling for touch devices, and keyboard arrow keys, with the option to disable loading of required plug-in files.
  • The new update, destroy, addEvent, removeEvent and goTo methods have been added with the ability to attach new initialized names, the event added, eventRemoved, eventChanged, and goToTimeline DOM Events.
  • Added new options to change button icons and to disable the use of the Font Awesome icon library.
  • Discard the use of multiple data themes, data history, and custom data view, in favor of the all-new single data attribute, the data horizontal timeline, which uses an object to house all previously used data.
  • New animation options have been added to customize the animation of event content.
  • Discard some individual options in favor of object options.

How to make use of it:

1. Include jQuery library along with the Horizontal Timeline plugin’s information on the HTML web page.

<link rel="stylesheet" href="/path/to/horizontal_timeline.2.0.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/horizontal_timeline.2.0.min.js"></script>

2. Include the jQuery touchSwipe plugin for the assist of contact gestures.

<script src="/path/to/jquery.touchSwipe.min.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>

3. Include the jQuery mousewheel plugin for the assist of the mouse wheel.

<script src="/path/to/jquery.touchSwipe.min.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>

4. Include the Font Awesome Iconic Font for the navigation controls.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

5. Add the timeline occasions to an HTML ordered list and specify the Datetime and date show with non-date text within the data-horizontal-timeline attribute.

<div class="horizontal-timeline" id="myTimeline">
  <div class="events-content">
    <ol>
      <li class="selected" data-horizontal-timeline='{"date": "12/12/2012", "customDisplay": "Custom Text"}'>
        Event 1
      </li>
      <li data-horizontal-timeline='{"date": "12/12/2016", "customDisplay": "Custom Text"}'>
        Event 2
      </li>
      <li data-horizontal-timeline='{"date": "12/12/2019", "customDisplay": "Custom Text"}'>
        Event 3
      </li>
      ... more events here ...
    </ol>
  </div>
</div>

6. To generate a timeline slider from the HTML ordered list, simply connect the function to the highest container and executed it.

$(function(){
  $('#myTimeline').horizontalTimeline();
});

7. Config the timeline slider by overriding the next choices.

$('#myTimeline').horizontalTimeline({

  // ! Deprecate these individual options in favour of the object options. //
  desktopDateIntervals: 200,   //************\\
  tabletDateIntervals: 150,   // Minimum: 120 \\
  mobileDateIntervals: 120,  //****************\\
  minimalFirstDateInterval: true,
  // ! End Deprecated options //

  /* New object options... */
  // If the deprecated single options exist in the user options, then use them,
  // otherwise default to the new object options.
  // Can not use in conjunction with the single options...
  // If both single and object options are set in the options, the object will take precedence.
  dateIntervals: {
    "desktop": 200,   //************\\
    "tablet": 150,   // Minimum: 120 \\
    "mobile": 120,  //****************\\
    "minimal": true
  },
    
  // display type: dateTime, date, time, dayMonth, monthYear, year
  dateDisplay: "dateTime", 

  // normal, reverse
  dateOrder: "normal",
    
  // enable/disable autoplay
  autoplay: false,

  // autoplay speed in seconds
  autoplaySpeed: 8,

  // pause hover
  autoplayPause_onHover: false, 
    
  // enable/disable mousewheel
  useScrollWheel: false,

  // enable/disable touchSwipe plugin
  useTouchSwipe: true,

  // enable/disable keyboard interactions
  useKeyboardKeys: false,

  // auto load required resources
  addRequiredFile: true,

  // enable nav buttons
  useNavBtns: true,

  // enable scroll buttons
  useScrollBtns: true,

  // Font Awesome icons
  useFontAwesomeIcons: true,

  // ! Deprecate these individual options in favour of the object options. //
  iconBaseClass: "fas fa-3x", // Space separated class names
  scrollLeft_iconClass: "fa-chevron-circle-left",
  scrollRight_iconClass: "fa-chevron-circle-right",
  prev_iconClass: "fa-arrow-circle-left",
  next_iconClass: "fa-arrow-circle-right",
  pause_iconClass: "fa-pause-circle",
  play_iconClass: "fa-play-circle",
  animation_baseClass: "animationSpeed", // Space separated class names
  enter_animationClass: {
    "left": "enter-left",
    "right": "enter-right"
  },
  exit_animationClass: {
    "left": "exit-left",
    "right": "exit-right"
  },
  // ! End Deprecated options //

  /* New object options... */
  // If the deprecated single options exist in the user options, then use them,
  // otherwise default to the new object options.
  // Can not use in conjunction with the single options...
  // If both single and object options are set in the options, the object will take precedence.
  iconClass: {
    "base": "fas fa-3x", // Space separated class names
    "scrollLeft": "fa-chevron-circle-left",
    "scrollRight": "fa-chevron-circle-right",
    "prev": "fa-arrow-circle-left",
    "next": "fa-arrow-circle-right",
    "pause": "fa-pause-circle",
    "play": "fa-play-circle"
  },
  animationClass: {
    "base": "animationSpeed", // Space separated class names,
    "enter": {
      "left": "enter-left",
      "right": "enter-right"
    },
    "exit": {
      "left": "exit-left",
      "right": "exit-right"
    }
  }
  /* End new object options */
  
});

8. API strategies.

// add new event
var html = '<li data-date="02/02/2020">Event Here.</li>';
$('#myTimeline').horizontalTimeline('addEvent', html, 'after', '01/01/2020');
$('#myTimeline').horizontalTimeline('addEvent', html, 'before', '03/03/2020');

// remove event
$('#myTimeline').horizontalTimeline('removeEvent', '02/02/2020');

// go to an event with or without options
$('#myTimeline').horizontalTimeline('goTo', '02/02/2020', {
  smoothScroll: true
});

// refresh the timeline
$('#myTimeline').horizontalTimeline('refresh');

// destroy the timeline
$('#myTimeline').horizontalTimeline('destroy');

9. Event handlers.

$('#myTimeline').on("eventAdded.horizontalTimeline", function(event){
  if(event.newEventDate == "02/02/2020") {
    // ...
  }
  console.log('Added ' + event.newEventDate);
});

$('#myTimeline').on("eventRemoved.horizontalTimeline", function(event){
  if(event.removedDate == "02/02/2020") {
    // ...
  }
  console.log('Removed ' + event.removedDate);
});

$('#myTimeline').on("eventChanged.horizontalTimeline", function(event){
  if(event.currentEventDate == "02/02/2020") {
    // ...
  }
  console.log('The new selected date is ' + event.currentEventDate);
});

$('#myTimeline').on("goToTimeline.horizontalTimeline", function(event){
  if(event.goToDate == "02/02/2020") {
  event.timelineSelector.addClass('goneTo');
    ...
  }
  console.log('The date we are going to is: ' + event.goToDate +' and on the timeline: '+ event.timelineSelector[0].id);
});

Interactive Timeline Slider, Horizontal Timeline 2.0 Plugin/Github, timeline jquery, dynamic timeline jquery


See Demo And Download

Official Website(yCodeTech): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.