37

Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js

 6 years ago
source link: https://www.tuicool.com/articles/hit/INZfmqn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Demo Download

Author: squarechip Views Total: 2,444 Official Page: Go to website Last Update: November 5, 2018 License: MIT

Preview:

a6Nzey2.png!web

Description:

timeline.js is a vanilla JavaScript plugin to render a responsive, horizontal/vertical timeline component from plain HTML.

Note: the component also can be implemented as a jQuery plugin, See Responsive Horizontal/Vertical Timeline Plugin For jQuery .

How to use it:

Place the timeline.js’ files into the html document.

<link href="dist/css/timeline.min.css" rel="stylesheet">
<script src="dist/js/timeline.min.js"></script>

The required HTML for the timeline.

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2018.3</h2>
          <p>Story 1</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2017.5</h2>
          <p>Story 2</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2016</h2>
          <p>Story 3</p>
        </div>
      </div>
      ...
    </div>
  </div>
</div>

Initialize the timeline.js and done.

timelineApp(document.querySelectorAll('.timeline'));

By default, the plugin will render a vertical timeline on the page. To change the mode to ‘horizontal’, follow this step.

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal'
});

If you’re using the horizontal mode, the timeline will automatically switch to ‘Vertical’ mode when the screen size is too small to fit the timeline. To change the default breakpoint, follow this step:

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal',
  forceVerticalWidth: 800
});

You can also specify how many items to display at a time.

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal',
  visibleItems: 4,
  forceVerticalWidth: 800
});

When using the ‘Vertical’ mode, you can choose the alignment of the first item.

timelineApp(document.querySelectorAll('.timeline'), {
  verticalStartPosition: 'left' // or right
});

You can also config the timeline via the following data attributes when you have multiple instances on the page.

<div class="timeline" data-option-name="value">
  ...
</div>

Changelog:

11/05/2018

  • Fixed: Error when there is less nodes to fill timeline visible area

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK