Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RyanFitzgerald/vertical-timeline
Responsive, jQuery-based vertical timeline generator
https://github.com/RyanFitzgerald/vertical-timeline
javascript jquery timeline vertical
Last synced: 3 months ago
JSON representation
Responsive, jQuery-based vertical timeline generator
- Host: GitHub
- URL: https://github.com/RyanFitzgerald/vertical-timeline
- Owner: RyanFitzgerald
- License: mit
- Created: 2016-02-03T01:18:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-09-12T19:42:31.000Z (about 7 years ago)
- Last Synced: 2024-04-28T00:36:10.301Z (6 months ago)
- Topics: javascript, jquery, timeline, vertical
- Language: HTML
- Homepage: http://ryanfitzgerald.github.io/vertical-timeline/
- Size: 160 KB
- Stars: 79
- Watchers: 5
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- project-awesome - RyanFitzgerald/vertical-timeline - Responsive, jQuery-based vertical timeline generator (HTML)
README
# 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](http://ryanfitzgerald.github.io/vertical-timeline/), 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:
```html
```
Bottom of page:
```html
```
Finally, initialize it:
```javascript
$('#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:
```javascript
$('#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:
```html
My Content 1
My Content 2
My Content 3
```
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:
```html
My Content 1
My Content 2
My Content 3
```
## 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:
```html
My Content 2
My Content 3
```
## Special Mention
#### [CodyHouse.co](https://codyhouse.co/)
Provided initial idea for the layout of the timeline from a published tutorial
## License
MIT License (Free - see LICENSE.md)