Horizontal Timeline 2.0, is a fully customisable jQuery adaptation of a JavaScript plugin originally created by CodyHouse, to create a dynamic timeline on the horizontal axis.

Version 2.0 adds functionality that has been previously requested for the original version, and more:


Setup

To get started, add the JS and CSS files to the document. The easiest way to do this is to add them via jsdilvr CDN. Otherwise, you can download them from our Github Repo.


                    // Add CSS via jsdilvr CDN
                    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css">
                 
                    // Add jQuery 
    				<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                    
                    // Add JS via jsdilvr CDN
                    <script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script>
                	

Minimal HTML

Unlike the original, 2.0 dynamically creates the timeline according to the amount of event content there is. Making it even simplier to setup! All you need to do is create the event content…


                            <div class="horizontal-timeline" id="example">
                                <div class="events-content">
                                    <ol>
                                        <li class="selected" data-date="16/01/2014">
                                            // Event description here
                                        </li>
                                        <li data-date="23/05/2015">
                                            // Event description here
                                        </li>
                                        …etc.
                                    </ol>
                                </div>
                            </div>   		
                     

Important things to note!

  • A unique id for the parent (the selector element) needs to be set. This is to ensure a timeline instance is created, allowing for multiple instances using multiple unique ids. Here, we're using example
  • Add an optional selected class to any of the <li> events content that you want to be selected first. If no events have it specified, then the first event will be selected.
  • The data-date attribute is how it all works! This needs to be a unique date. You can use time for same day events. The formats are as follows:
Data-date format
DD/MM/YYYY
(23/10/2005)
DD/MM/YYYYTHH:MM
(23/10/2005T15:30)
HH:MM
(15:30)
  • The parent (the selector element) naturally has a 100% width, so you will need to set a width if desired on the element or on a grand-parent element.

Initialise the timeline with jQuery using the default options.


                    	<script>$('#example').horizontalTimeline();</script>
                    

Date Display Order

The order of the event content is crucial for the ordering of the timeline event date display. By using this natural support for ordering, you can reverse the order in which the events are displayed along the timeline. For example, if the timeline events are ascending but want them decending, then reversing the event content will do the trick.

However, what if you want the timeline to start selecting events from the right instead of the left? Well, that's where the dateOrder option comes in handy.

Setting it to reverse will reverse the order in which the event dates are displayed and selected on the timeline. The default is normal .

Note:

  • When set to normal , the order of the date display is the same as their corresponding event content and the selection process starts on the left.
  • When set to reverse , the order of the date display is reversed and the selection process starts on the right; - i.e., the first event is now the last event on the farthest right along the timeline, but it is still technically the first event being selected. However, the timeline filling line direction remains unchanged and will always fill from the left.
  • Autoplay will be affected and works in the direction set by this option. But the progress bar direction remains unchanged and will always fill from the left.
  • If any of the event content has the optional selected class then the selection process is skipped naturally.
  1. 16/01/2014 - First

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 17/02/2014 - Second

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 18/03/2014 - Third

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 19/04/2014 - Fourth

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 20/05/2014 - Fifth

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


					$('#example').horizontalTimeline({
						dateOrder: "reverse"
						
					});
				

Options

				
					

/* The Defaults */

$('#example').horizontalTimeline({ desktopDateIntervals: 200, tabletDateIntervals: 150, mobileDateIntervals: 120, minimalFirstDateInterval: true, dateDisplay: "dateTime", // dateTime, date, time, dayMonth, monthYear, year dateOrder: "normal", // normal, reverse autoplay: false, autoplaySpeed: 8, autoplayPause_onHover: false, useScrollWheel: false, useTouchSwipe: true, useKeyboardKeys: false, addRequiredFile: true, useFontAwesomeIcons: true, useNavBtns: true, useScrollBtns: true, iconBaseClass: "fas fa-3x", 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" });

Event Date Intervals

The all new uniform event dates replaces the scattered style in the original version, meaning they are now positioned at regular intervals.

To keep things from colliding, the event date intervals have a minimum of 120 px. If the intervals fall below this value, then it will be automatically reset to this value. The intervals are split into 4 options:

  • desktopDateIntervals This describes the intervals on desktops. The default is 200
  • tabletDateIntervals This describes the intervals on tablets. The default is 150
  • mobileDateIntervals This describes the intervals on mobiles. The default is 120
  • minimalFirstDateInterval This sets the first date to the start of the timeline, with effectively no interval, at 0px, while the desktop, tablet and mobile date intervals will be set from the second date onwards. The default is true

Information to Note

  • On mobile, minimalFirstDateInterval will always return true regardless of whether it is set to false. This is to keep mobile viewing easy.
  • The intervals change according to the width of the device/browser, making it responsive.
  • The following example is of the first date scenario with the interval defaults.
  1. First Date

    At 0px.

  2. Second Date

    At 200px (desktop), 150px (tablet), or 120px (mobile).

				
					$('#example').horizontalTimeline({
						desktopDateIntervals: 200,
						tabletDateIntervals: 150,
						mobileDateIntervals: 120,
						minimalFirstDateInterval: true
					});
				
			

Event Date Display

There may be times when a different type of date display will be useful, version 2.0 adds that functionality, allowing up to 6 types! You can specify the type of date display using the dateDisplay option. The display types are as follows:

  • dateTime defines the full date/time set in data-date
  • date defines the date only, displays in the format DD/MM/YYYY
  • time defines the time only, displays in the format HH:MM
  • dayMonth defines the day and month only, displays in the format DD/monthName
  • monthYear defines the month and year only, displays in the format monthName/YYYY
  • year defines the year only, displays in the format YYYY

The default is dateTime

Custom Display

As requested via email, there is also an option to customise the date display, which uses a data-attribute. So in case the project doesn't require dates, but another form of text, you can specify that custom text for the date display with this option.

There is no plugin options for this one! Just add the data-custom-display attribute with your custom text to the appropriate events content, and it'll work immediately.

Note: This overrides the dateDisplay plugin option whereever the data-custom-display attribute is used.

You can also mix the use of custom text with the date formats, so that only one (or more) events can be custom, while the rest will be left untouched as one of the 6 date formats.

  1. Step 1 at 16/01/2014 14:30

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. Step 2 at 17/01/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. No Custom Text at 15:44

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. Step 3 at 15:45

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                    
                        <div class="horizontal-timeline" id="example">
                            <div class="events-content">
                                <ol>
                                    <li class="selected" data-date="16/01/2014" data-custom-display="Custom Text">
                                        // Event description here
                                    </li>
                                    <li data-date="23/05/2015">
									// Event description here
								</li>
                                    …etc.
                                </ol>
                            </div>
                        </div>   		
                    
                

dateTime

Set data-date in any of the formats.

  1. 16/01/2014 14:30

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 16/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 15:45

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 16/01/2017

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 16/01/2018 00:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  6. 16/01/2019

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "dateTime"
					});
				
			

date

Set data-date in the format of DD/MM/YYYY or DD/MM/YYYYTHH:MM.

  1. 01/01/2014 12:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 01/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 02/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 01/12/2016

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 25/11/2017

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "date"
					});
				
			

time

Set data-date in the format of HH:MM or DD/MM/YYYYTHH:MM.

  1. 12:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 01/01/2015 08:15

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 23:50

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 01/12/2016 18:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 00:01

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "time"
					});
				
			

dayMonth

Set data-date in the format of DD/MM/YYYY or DD/MM/YYYYTHH:MM.

  1. 01/01/2014 12:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 02/02/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 03/03/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 04/04/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 05/05/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  6. 06/06/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  7. 07/07/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  8. 08/08/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  9. 09/09/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  10. 10/10/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  11. 11/11/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  12. 12/12/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "dayMonth"
					});
				
			

monthYear

Set data-date in the format of DD/MM/YYYY or DD/MM/YYYYTHH:MM.

  1. 01/01/2014 12:00

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 02/02/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 03/03/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 04/04/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 05/05/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  6. 06/06/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  7. 07/07/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  8. 08/08/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  9. 09/09/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  10. 10/10/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  11. 11/11/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  12. 12/12/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "monthYear"
					});
				
			

year

Set data-date in the format of DD/MM/YYYY or DD/MM/YYYYTHH:MM.

  1. 16/01/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 16/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 23/10/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 23/11/2016

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 25/11/2017

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						dateDisplay: "year"
					});
				
			

Autoplay

By popular demand, an autoplay feature has been added! Plus pause/play buttons, pause on hover and adjustable speed, with a progress bar to visualise the length of time autoplay stays on each event.

There are 3 options:

  • autoplay This enables the autoplay feature. The default is false
  • autoplaySpeed This specifies the speed of the autoplay cycle in seconds. The default is 8
  • autoplayPause_onHover When set to true, this allows the autoplay cycle to pause on mouse hover of the event content. It will play again when the mouse hover ends. The default is false

Information to note

  • Autoplay can only be used once per page, meaning it can not be set on multiple timelines as yet.
  • Once paused, you can still swipe the content, click any of the events and the next/prev buttons without restarting the autoplay cycle.
  • If autoplay was paused via the pause button, and the mouse hovers over the content, the autoplay cycle will not restart when the mouse hover ends.
  • Pause on hover is disabled on mobiles.
  • Autoplay will always know which event is selected, no matter how you navigate it, paused or not; so there will be no glitches and it won't get out of sync.
  1. 16/01/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 16/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 23/10/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  4. 23/10/2017

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  5. 23/10/2018

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
				$('#example').horizontalTimeline({
					autoplay: true,
					autoplaySpeed: 8,
					autoplayPause_onHover: true
				});
				
			

Go-to Timeline

Want to link to a specific date of a timeline? No problem, just add a simple go-to anchor link anywhere on the page.

				
					<a href="#example" class="goto-horizontal-timeline" data-gototimeline='{"date": "23/10/2015", "scrollspeed": 500, "scrolloffset": 0, "scrolleasing": "linear"}'>Link description</a>
				
			

Requirements

  • The href describes the timeline ID of which we are targeting. If the link is inside a timeline and we want to target the same timeline (itself), then use a single # , like: href="#"
  • The class specifies the button we are using as the go-to link. This must be goto-horizontal-timeline to keep things easy.
  • The data-gototimeline attribute describes the go-to timeline options. The options are defined as an object.
    • The date is required and it defines the date of the timeline to go-to. This has to be exactly as defined in the data-date of the target timeline's event content.
    • The scrollspeed is optional and it defines the speed in milliseconds (ms) of the smooth scroll. If the option isn't defined, then the default is 500 ms.
    • The scrolloffset is optional and it defines the amount of offset in pixels (px) to subtract from the element's position (useful for fixed headers). If the option isn't defined, then the default is 0 px.
    • The scrolleasing is optional and it defines the easing method of scrolling. To get the most out of this, a jQuery plugin is recommended. This website uses the jQuery Easing Plugin. If the option isn't defined, then the default is linear

Placement

The go-to timeline link works just like any other link, so you can use it:

Information to Note

  • The timeline will only change content:
    • Once the smooth scroll has finished animating.
    • If a date isn't already selected.
  • The smooth scroll won't function if a link is inside a timeline and is targetting itself, the timeline content will just change instead.
  • No options are passed through the jQuery initialisation method, instead the timeline automatically looks for these links within the page and grabs whats needed from them. So you can go ahead and initialise the timeline as normal.

Mousewheel

Scrolling the event content couldn't be easier using the jQuery Mousewheel plugin!

useScrollWheel enables the mousewheel functionality. Scrolling works when the mouse is over the event content and then using the mousewheel, scroll down to show the next content and scroll up to show the previous content. The default is false

Note: the required plugin file will be loaded dynamically, so there's no need to add it to the document. But if it's already apart of your project, don't worry; the timeline will know that and won't load the plugin again, it'll just call the functions. If addRequiredFile option is set to false the required file won't be loaded at all, the timeline will just call the functions.

  1. Scroll Down!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 16/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. Scroll Up!

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						useScrollWheel: true
						
					});
				
			

TouchSwipe

Touch events for mobile and touch screen devices are provided by the jQuery TouchSwipe plugin.

useTouchSwipe enables the TouchSwipe functionality. The default is true

Remember:

Swiping from right to left (swipe left) is to go right.
Swiping from left to right (swipe right) is to go left.
While it is topsy turvy, just think of dragging them along instead.

Usage

There's 2 ways TouchSwipe is implemented:

  • Scrolling the timeline

    Scrolling the timeline is made easier with TouchSwipe... just swipe(drag) the timeline in the direction, and it will scroll the amount of distance swiped. A small distance swiped means a small distance scrolled and likewise for large distances.

  • Changing the event content

    Changing the event content couldn't be easier... just swipe(drag) the event content in the direction and it will change accordingly.

While it is useful for mobiles and other touch screen devices, timeline won't force the TouchSwipe functionality if it's set as false

Note: the required plugin file will be loaded dynamically, so there's no need to add it to the document. But if it's already apart of your project, don't worry; the timeline will know that and won't load the plugin again, it'll just call the functions. If addRequiredFile option is set to false the required file won't be loaded at all, the timeline will just call the functions.

All of the timelines on this website are examples of TouchSwipe, just load it up in a mobile or touch screen device for real touch or on a desktop computer using the mouse.

				
					$('#example').horizontalTimeline({
						useTouchSwipe: true
						
					});
				
			

Keyboard Arrow Keys

You can use the keyboard arrow keys (left and right) to scroll the event content.

useKeyboardKeys enables the keyboard arrow keys. The default is false

  1. 16/01/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. 16/01/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. 23/10/2015

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

				
					$('#example').horizontalTimeline({
						useKeyboardKeys: true
						
					});
				
			

Methods

There are 4 methods you can use dynamically after the initialisation of a timeline.

  • Refresh

    The refresh method allows you to refresh the timeline if:

    • The width of the timeline changes dynamically.
    • New event content is added dynamically. Though if new content is added via the addEvent method, then you don't need to use this.
    • An event is removed dynamically. Though if the event is removed via the removeEvent method, then you don't need to use this.
    • Plus anything else that requires a refresh.
    							
    								$('#example').horizontalTimeline('refresh');
    							
    						
  • Destroy

    The destroy method allows you to completely destroy the timeline:

    • Removes all HTML that was added.
    • Removes all event handlers used, including TouchSwipe.
    • Resets the event content to its original state, therefore all classes and id's added by the plugin will be removed. If there was a selected class on one of the event content initially, then it will be reset back to this state. Additionally, if any event was removed or new events added, this will readd or remove the events respectively.
    • Destroys and removes autoplay.
    • Deletes the instance stored as data.
    • If the timeline that is being destroyed is the one and only timeline on the page, then this method will also destroy the go-to timeline functionality and act as a normal link.
    							
    								$('#example').horizontalTimeline('destroy');
    							
    						
  • Add Event

    The addEvent method allows you to add an event to the timeline.

    We already know that timeline automatically creates the timeline event dates, so all you need to specify is:

    • The event content html making sure to use a unique date in data-date as usual.
    • The insertion method: before or after.
    • An existing unique date to position the new content around. This must match the existing date in the data-date attribute utilising the formats.

    Example: If we want to add a new event with the date 02/02/2002 after the existing event with the date 01/01/2001, we would pass the 'after' and '01/01/2001' into the method:

    							var html = '<li data-date="02/02/2002">Event content description.</li>';
    							
    							$('#example').horizontalTimeline('addEvent', html, 'after', '01/01/2001');
    						

    After the event content is added, the method will then create the event date along the timeline and the refresh method will be called automatically.

    Note: If a new event date already exists in the timeline, then the method will just ignore it.

  • Remove Event

    The removeEvent method allows you to remove an event from the timeline.

    Simply pass the unique date* to the method, and it'll remove the timeline event and the content connected with that date and the refresh method will be called automatically.

    Note:
    • If the event in question is selected, the method will remove the class and it will always try to select the next event, upon failing it will select the previous event instead.
    • If the event in question is the one and only event in the timeline, it will not be removed. There must always be at least 1 event in the timeline after initialisation. Please use the Destroy method instead.
    • *The date must match the unique date in the data-date attribute utilising the formats.
    														
    							$('#example').horizontalTimeline('removeEvent', '01/01/2001');
    							
    						

Use the controls below to play with the methods.

Add Event

All formats for the date is accepted, this is for the data-date.

Remove Event
  1. 16/01/2014

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Extras

  • The Buttons

    The prev/next buttons have been renamed to scroll-left and scroll-right respectively, to reflect their functionality:

    • Scroll-left button controls the left scrolling of the timeline.
    • Scroll-right button controls the right scrolling of the timeline.

    New prev/next buttons have been added which controls the event content:

    • Prev button changes the current event content to the previous content.
    • Next button changes the current event content to the next content.
  • Inactive Button States

    The buttons will become inactive under certain conditions:

    • If the first event is selected, then the prev button will become inactive and the next button will be active.
    • If the last event is selected, then the next button will become inactive and the prev button will be active.
    • If the timeline width is large enough to accomodate all events without having to scroll, then the scroll-left and scroll-right buttons will become inactive
    • If the timeline is at the start and can't physically scroll left, then the scroll-left button will become inactive , and the scroll-right button will be active.
    • If the timeline is at the end and can't physically scroll right, then the scroll-right button will become inactive , and the scroll-left button will be active.
  • Button Icons

    All button icons are provided by the font library Font Awesome (v5.8.2) and it's CSS file on cdnjs will be dynamically added to the head of the document, so there's no need to add it specifically. Though, if it's already apart of your project, don't worry, timeline will know that and won't add it again. If addRequiredFile option is set to false the required file won't be loaded at all.

    By default the button icons have specific classes from Font Awesome, but you can change these to different icons within the library by changing the individual class options. There are 7 icon class options:

    • iconBaseClass describes the class of the font libary. You can also specify any other related class such as sizing.
    • scrollLeft_iconClass describes the class of the scroll-left button icon.
    • scrollRight_iconClass describes the class of the scroll-right button icon.
    • prev_iconClass describes the class of the prev button icon.
    • next_iconClass describes the class of the next button icon.
    • pause_iconClass describes the class of the pause button icon.
    • play_iconClass describes the class of the play button icon.
    
    					$('#example').horizontalTimeline({
    						iconBaseClass: "fas fa-3x",
                            
                            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"
    						
    					});

    If you want to use another icon font library, you can disable the use of Font Awesome altogether and change the icon classes accordingly. To disable Font Awesome, set useFontAwesomeIcons option to false .

  • Disabling The Buttons

    As per a request via email, the prev/next and scroll-left/right buttons can now be disabled. There are two options for this:

    • useNavBtns When set to false, this disables the prev/next buttons. The default is true.
    • useScrollBtns When set to false, this disables the scroll-left/right buttons. The default is true.

    Using the 2 aformentioned options, there are 4 different outcomes:

    • Both the nav (prev/next) buttons and the scroll (left/right) buttons are created and enabled - the default.
      
                              $('#example').horizontalTimeline({
      								useNavBtns: true,
                                  	useScrollBtns: true
                                      
      						});
    • Only the nav (prev/next) buttons are created and enabled.
      
                              $('#example').horizontalTimeline({
      								useNavBtns: true,
                                  	useScrollBtns: false
                                      
      						});
    • Only the scroll (left/right) buttons are created and enabled.
      
                              $('#example').horizontalTimeline({
      								useNavBtns: false,
                                  	useScrollBtns: true
                                      
      						});
    • Non of the buttons are created at all and are disabled.
      
                              $('#example').horizontalTimeline({
      								useNavBtns: false,
                                  	useScrollBtns: false
                                      
      						});

    Note: When disabled, the buttons will never be created, so there will be no redundant HTML lying about.

  • Add Required Files

    By default, adding the required files for the Mousewheel, TouchSwipe and Font Awesome plugins is enabled. But you can disable this by setting the addRequiredFile option to false and timeline will not load any of the files at all, but will still call the plugins if their option is enabled.

    
    					$('#example').horizontalTimeline({
    						addRequiredFile: false
    						
    					});