Easy Responsive jQuery Timeline Plugin TimelineMe - Download Easy Responsive jQuery Timeline Plugin - TimelineMe

Download Easy Responsive jQuery Timeline Plugin – TimelineMe

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Responsive jQuery Timeline Plugin – TimelineMe, hope it will help you in programming stack.

Easy Responsive jQuery Timeline Plugin TimelineMe - Download Easy Responsive jQuery Timeline Plugin - TimelineMe
File Size: 32 KB
Views Total: 12090
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

TimelineMe is a simple-to-use jQuery plugin for rendering a fully responsive timeline on the webpage that works perfectly with most front-end frameworks such as Bootstrap, Foundation and Materialize.

How to use it:

1. Include the required stylesheet jquery.timelineMe.css in the head section, and the JavaScript file jquery.timelineMe.js at the bottom of the document.

view source
1 <link rel="stylesheet" href="css/jquery.timelineMe.css">
2   ...
3 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
4 <script src="js/jquery.timelineMe.js"></script>

2. Create an DOM element where plugin is applied.

view source
1 <div id="timeline-container"></div>

3. Add your custom events to the timeline.

view source
01 var events = [{
02  
03     // 'milestone' | 'smallItem' | 'bigItem'
04     type: 'milestone',
05     label: 'my label',
06     shortContent: 'short desc MS',
07     fullContent: 'big desc MS',
08     showMore: undefined,
09     showLess: undefined
10   },
11   {
12     type: 'smallItem',
13     label: 'my label',
14     shortContent: 'short desc SI',
15     fullContent: 'big desc SI <br> with more lines <br> than the short one. <br> <div style="text-align: center;"><img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" style="width: 50%;" /></div>',
16     showMore: 'show more',
17     showLess: 'show less'
18   },
19   {
20     type: 'bigItem',
21     label: '<span style="background-color: #7DD7DD;">my label</span>',
22     shortContent: 'short desc BI',
23     fullContent: 'big desc BI <br> with more lines <br> than the short one. <br> <div style="text-align: center;"><img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" style="width: 50%;" /></div>',
24     showMore: 'show more',
25     showLess: 'show less'
26   }
27 ]

4. Initialize the plugin.

view source
1 $('#timeline-container').timelineMe({items: events});

5. Public methods.

view source
1 // initialize the plugin
2 $('#timeline-container').timelineMe();
3  
4 // destroy the plugin
5 $('#timeline-container').timelineMe("destroy");
6  
7 // return item corresponding to the passed index
8 $('#timeline-container').timelineMe("getItem");

6. All possible options.

view source
01 orientation             : 'vertical',
02 items                   : [],
03 // horizontal-orientation specific options
04 contentDimensionValue   : '400px',
05 labelDimensionValue     : '200px',
06 scrollBar               : true,
07 scrollZones             : false,
08 scrollArrows            : false,
09 leftArrowElm            : undefined,
10 rightArrowElm           : undefined

Change logs:

2016-04-11

  • add a way to handle html templates

2016-03-17

  • v0.1.7

2016-03-09

  • allows to set custom arrows

2016-02-24

  • Works with collapsible items

2016-02-15

  • Continue horizontal mode implementation: work on scroll bar & zones

2016-02-05

  • Change timeline thickness as sass variable

2016-01-01

  • Change timeline thickness as sass variable

2015-10-09

  • Delete buggy line for height check, and update version

2015-10-04

  • Change label’s point element from pseudo-element to a real element that could contain a pictogram. Enhance SCSS file to have a better control through variables.

This awesome jQuery plugin is developed by mickaelr. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: