Vertical Timeline
Vertical Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin.
The website for this plugin can be found here, which has the demo.
Installation & Setup
All the installation that is required is simply including the compiled CSS and JS file in your document (minified or not) and then initializing it.
Top of page:
<link rel="stylesheet" type="text/css" href="path/to/vertical-timeline.css">Bottom of page:
<script src="path/to/vertical-timeline.min.js"></script>Finally, initialize it:
$('#someIDorClass').verticalTimeline();How to Use
Timeline has a few options that can be customized to suite your specific needs. The included options that can be utilized are:
| Name | Description | Default |
|---|---|---|
| startLeft | Choose whether or not it starts on the left (false = right side) | true |
| alternate | Choose whether or not the points alternate sides | true |
| animate | Choose whether or not points fade in as they appear in viewport (options: "fade", "slide") | false |
| arrows | Choose whether or not the content arrows show | true |
Example Usage
Another example usage of timeline using it's available options is as follows:
$('#myID').verticalTimeline({
startLeft: false,
alternate: true,
animate: "fade",
arrows: false
});Adding Dates
Dates can easily be added by utilizing data attributes. In order to have dates show up, the following data attribute is used:
<div id="myTimeline">
<div data-vtdate="February 2016">
My Content 1
</div>
<div data-vtdate="March 2016">
My Content 2
</div>
<div data-vtdate="April 2016">
My Content 3
</div>
</div>Every time that data attribute is used, that date will be displayed.
Override Side
If you want, you can override the side that the content block shows up on by default. By adding the override, it will ignore whatever alternation or start side the other elements use. This can be done as follows:
<div id="myTimeline">
<div data-vtside="left">
My Content 1
</div>
<div>
My Content 2
</div>
<div>
My Content 3
</div>
</div>Modifying Styles
All elements use classes so their styles can be easily overwritten. You can add styles for any of the following elements:
| Name | Description | Class Used |
|---|---|---|
| Timelime Wrapper | This wraps the entire timeline | .vtimeline |
| Timeline Point | This wraps the entirety of each point on the timeline | .vtimeline-point |
| Timeline Icon | This is the icon associated with each point | .vtimeline-icon |
| Timeline Block | This holds the date and content for each point | .vtimeline-block |
| Timeline Date | This holds the date, if provided | .vtimeline-date |
| Timeline Content | This holds the actual content of each point | .vtimeline-content |
Adding Icons
You can optionally add an icon inside of the circle corresponding to each timeline point. To do this, create a div inside of your content and give it the data attribute data-vticon="true". Anything inside this div will get placed inside .vtimeline-icon of the corresponding element. You can use this to easily associate SVG icons, font-awesome icons, etc. with every point or only certain points. An example usage is as follows:
<div id="myTimeline">
<div>
<div data-vticon="true">
<img src="some/icon/here.png">
</div>
</div>
<div>
My Content 2
</div>
<div>
My Content 3
</div>
</div>Special Mention
CodyHouse.co
Provided initial idea for the layout of the timeline from a published tutorial
License
MIT License (Free - see LICENSE.md)