Inline Data Attributes

Data attributes are a feature built into the HTML specification which allows us to store extra information without using hacks (e.g. non-standard tags). The syntax is simple. Any attribute on any HTML element whose attribute name starts with data- is a data attribute. You can use these data attributes to pass extra parameters to Vanilla Timeline. Here's how it works:


  <div class="timeline" data-mode="horizontal">
    <div class="timeline__wrap">
      <div class="timeline__items">
        <!-- your node data goes here -->
      </div>
    </div>
  </div>

Look at the data-mode="horizontal" text. That's a data attribute. We've applied it to the parent element which contains the "timeline" class. In this particular case, the data attribute is instructing Vanilla Timeline to draw a horizontally-oriented timeline by passing the value "horizontal" to the mode option. Using data attributes on your parent element (the one which contains the "timeline" class), you can change the look and behavior of the timelines being generated by Vanilla Timeline. Each timeline on your page can pass its own data attributes and be modified individually (per timeline). You could have one timeline that is horizontally-oriented and another on the same page which is vertically-oriented. All you have to do is pass different data attributes.

A List of Data Attributes You Can Pass to Vanilla Timeline

Here is a table showing all of the data attributes you can pass to Vanilla Timeline. Keep in mind that some data attributes are only designed to effect a particular layout (e.g. horizontal or vertical). So, if you pass data attributes to modify a vertical timeline but, you're using horizontal layout, the attribute will have no effect. A specific example: the data attribute data-min-width only effects timelines in vertical mode. If you set your timeline to "horizontal" mode and pass data attribute data-min-width, it will be ignored.

Data Attribute	Type	Default	Description
data-mode	string	vertical	Determines timeline layout mode. Either vertical or horizontal
data-min-width	number	600	Minimum viewport width (in pixels) to maintain horizontal layout mode. Only used by horizontal.
data-max-width	number	600	Maximum viewport width (in pixels) to maintain vertical layout mode. Only used by vertical.
data-move-items	number	1	Number of nodes to scroll per navigation click. Only used by horizontal.
data-start-index	number	0	Initial node to start from. The first node begins at zero. Only used by horizontal.
data-horizontal-start-position	string	top	Alignment of first node in horizontal layout. Either top or bottom
data-vertical-start-position	string	left	Alignment of first node in wide screen vertical layout. Either left or right
data-same-side-nodes	string boolean	false	If set, forces all nodes to the same side of the timeline. Accepts top/bottom (horizontal) or left/right (vertical). If orientation-specific start position is also set (data-horizontal-start-position/data-vertical-start-position) you can set value to true to follow the existing start position.
data-vertical-trigger	string	15%	Scroll trigger distance: determines when bottom items fade in to view while scrolling. Can be a percentage or a pixel value (e.g. 25% or 150px). Only used by vertical.
data-rtl-mode	boolean	false	Right to left mode is used for languages that are read from right to left. Either true or false. Only used by horizontal layout and overrides data-start-index setting.
data-node-color	string	—	Node circle color. Value can be written as Hex, RGB, HSL.
data-line-color	string	—	Timeline line color. Value can be written as Hex, RGB, HSL.
data-nav-color	string	—	Navigation button color. Value can be written as Hex, RGB, HSL.
data-use-swiper	boolean	false	Used to enable optional touch screen support for SwiperJS library (which must be installed separately). Either true or false. Only used by horizontal timelines.
data-json-config	string	—	path to a valid JSON data file (e.g. /path/to/file.json)

The second to last item, data-use-swiper, is a special data attribute and should be considered different from the others. If you have the SwiperJS Javascript library installed and set this attribute to true you can enable swiping behavior for horizontal timelines on devices with touch screens. If the SwiperJS library is not installed or, if your timeline is in vertical mode, or the user is not on a touch screen device, this data attribute will have no effect. Even though Vanilla Timeline works with the SwiperJS library, we don't support it directly and consider it a 3rd party add-on. You can learn more by checking out the SwiperJS demo page to see it working with Vanilla Timeline.

The last item, data-json-config, is also a special data attribute and should be considered different from the others. If you provide a path to a valid JSON file with this data attribute, Vanilla Timeline will prioritize the configuration settings from the JSON file and ignore other data attributes being passed. You can learn more about how this method works by reading Using a JSON File. But, as far as data attributes are concerned, you should either be passing values inline in your HTML element or, you should be passing a path using data-json-config. But, you shouldn't attempt to do both. Note: you can use inline data attributes on one timeline and a JSON config file on a different one. It's either one or the other.

Using Multiple Data Attributes to Customize a Timeline

Previously, we've only shown one data attribute (mode) being passed to a timeline. But, you can pass multiple data attributes to customize the look and functionality of your timeline.


  <div class="timeline" 
          data-mode="horizontal"
          data-same-side-nodes="bottom"
          data-min-width="600"
          data-start-index="3"
          data-move-items="3"
          data-node-color="#051159"
          data-line-color="#051159"
          data-nav-color="#053359" 
  >
    <div class="timeline__wrap">
      <div class="timeline__items">
        <!-- your node data goes here -->
      </div>
    </div>
  </div>