Timeline

Timeline showcases events. See a live demo here. Timeline's features include autoplay, early preview, and custom timers. It uses no external JavaScript dependencies and works on IE11 and all other major browsers.

Getting Started

First, you will need to include the javascript and stylesheet files. Next, code your HTML using the specific classes and ids listed. Follow the instructions below to get started.

First, include the Timeline stylesheet and script into your HTML

<html>
 <head>
  <link href="/styles/timeline.min.css" rel="stylesheet">
 </head>
 <body>
  <!-- Add your Timeline markup here -->
  <script src="/js/timeline.min.js"></script>
 </body>
</html>

Next, use the Timeline markup to create your line, ball and events

<div id="tL-body" class="dark-theme round-theme">
  <div id="tL">
    <div class="tL line"></div>
    <div class="tL ball"></div> <!-- optional: add id=tL-autoplay to this element -->

    <!-- Add your events -->
    <div class="tL event" data-side="right">
      <h4 class="tL title">My first event</h4>
      <time class="tL date">Today</time>
      <div class="tL body">
       <h3>This is timeline!</h3>
      </div>
    </div>
    <div class="tL event" data-side="left">
      <h4 class="tL title">Second  event</h4>
      <time class="tL date">March 11, 2016</time>
      <div class="tL body">
        <p>You should check out the autoplay in the docs, wow...</p>
      </div>
    </div>

  </div>
</div>

NOTE: Each div, class, data-attribute, and id used above is required. For example, the event div needs both classes .tL and .event added to the element. Each event div must also have a data-side attribute that is equal to left or right.

Features

Autoplay

Autoplay automatically cycles through each event on your timeline. By default, it spends 12 seconds on each event, but you can modify this by using a custom timer (see below). Any mouse click will disable autoplay, but if restarted, it begins where it left off.

Enable autoplay by adding an element with the id of tL-autoplay to your page. How you choose to style this element is up to you, but the id tL-autoPlay must be used to trigger the feature. Here is a simple Bootstrap example that works nicely with the built in Timeline stylesheet.

<div class="tL ball" id="tL-autoPlay">
  <div id="tL-autoPlay-icon"><span class="glyphicon glyphicon-chevron-right"></span></div>
</div>

Custom Timer

You can change the amount of time that Autoplay will pause on a particular event by adding the data-timer attribute to any .tL.event element. Choose your speed in milliseconds, but do not include the unit type: i.e. data-timer=5000. By default Autoplay pauses for 12000ms.

<div class="tL event" data-timer="20000" data-side="right">
  ...
</div>

Early Preview

Early preview makes an event on the Timeline visible before it's clicked. Add the early-open class to any .tL.event element to enable Early Preview. To hide specific body content from showing up, use a not-early class on the element. 

<div class="tL event early-open" data-side="right">
  ...
  <div class="tL body">
    <p>This content will display on the timeline.</p>
    <p class="not-early">This content will not show up with the early preview and will only display when the event is clicked.</p>
  </div>
</div>