TimelineMe

The aim of this plugin is to easily build a timeline display for your data.

License

The plugin is under MIT License

Quickstart

Include jQuery and timelineMe css and js in your project:


<link rel="stylesheet" type="text/css" href="path/to/timelineMe/jquery.timelineMe.css">
<script type="text/javascript" src="path/to/jquery/jquery.min.js"></script>
<script type="text/javascript" src="path/to/timelineMe/jquery.timelineMe.js"></script>

Container options

Name Type Default Description
items array [] Timeline items array
orientation string 'vertical' (not implemented yet) Timeline orientation: 'vetical' | 'horizontal'
scrollZones boolean true (in progress) Enable/disable scrolling zones
scrollBar boolean true (in progress) Enable/disable scrollbar
labelClass string undefined To add your own css class to timeline items' labels
shortContentClass string undefined To add your own css class to timeline items' short content elements
fullContentClass string undefined To add your own css class to timeline items' full content elements
showMoreClass string undefined To add your own css class to timeline items' show more elements
showLessClass string undefined To add your own css class to timeline items' show less elements

Items options

Name Type Default Description
type string undefined The item type: 'milestone' | 'smallItem' | 'bigItem'
label string undefined Html content of item's label
labelTemplate string undefined Path to html file containing label template
shortContent string undefined Html content of item's short content element
shortContentTemplate string undefined Path to html file containing short content template
fullContent string undefined Html content of item's full content element
fullContentTemplate string undefined Path to html file containing full content template
showMore string undefined Html content of item's show more element
showMoreTemplate string undefined Path to html file containing show more template
showLess string undefined Html content of item's show less element
showLessTemplate string undefined Path to html file containing show less template
forcePosition string undefined To force the item position: 'left' | 'right' | 'top' | 'bottom'
relativePosition number undefined To relatively position items (use Date.getTime() to make it work with dates)

Methods

Method Description Usage
getItem Return item corresponding to the passed index
collapse Show or hide content blocks: 'hide' | 'show' | 'toggle'

Events

Event Description
'timelineMe.itemHeightChanged'
'timelineMe.smallItem.displayfull'
'timelineMe.bigItem.flipped'

Examples

Default

<div id="timeline-container-basic" type="text"></div>
$('#timeline-container-basic').timelineMe({
  items: [
    {
      type: 'milestone',
      label: 'my label 1'
    },
    {
      type: 'smallItem',
      label: 'my label 2',
      shortContent: 'short description',
      fullContent: 'big description <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>',
      showMore: 'show more',
      showLess: 'show less'
    },
    {
      type: 'bigItem',
      label: '<span style="background-color: #8DD8DD;">my label 3</span>',
      shortContent: 'short description',
      fullContent: 'big description <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>',
      showMore: 'show more',
      showLess: 'show less'
    }
  ]
});

Force item's position

<div id="timeline-container-force-position" type="text"></div>
$('#timeline-container-force-position').timelineMe({
  items: [
    {
      type: 'smallItem',
      label: 'my label 1',
      shortContent: 'short description 1',
      fullContent: 'big description 1',
      showMore: 'show more',
      showLess: 'show less'
    },
    {
      type: 'smallItem',
      label: 'my label 2',
      shortContent: 'short description 2',
      fullContent: 'big description 2',
      showMore: 'show more',
      showLess: 'show less'
    },
    {
      type: 'smallItem',
      label: 'my label 3',
      shortContent: 'short description 3',
      fullContent: 'big description 3',
      showMore: 'show more',
      showLess: 'show less',
      forcePosition: 'right'
    },
    {
      type: 'smallItem',
      label: 'my label 4',
      shortContent: 'short description 4',
      fullContent: 'big description 4',
      showMore: 'show more',
      showLess: 'show less',
      forcePosition: 'left'
    }
  ]
});

Use custom (or frameworks' classes)

<div id="timeline-container-custom-classes" type="text"></div>
$('#timeline-container-custom-classes').timelineMe({
  labelClass: 'labelclass',
  shortContentClass: 'card-panel',
  fullContentClass: 'card-panel',
  showMoreClass: 'showmoreclass',
  showLessClass: 'showlessclass',
  items: [
    {
      type: 'smallItem',
      label: 'my label 1',
      shortContent: 'short description 1',
      fullContent: 'big description 1',
      showMore: '<a class="custom-show-btn"><i class="material-icons">add</i></a>',
      showLess: '<a class="custom-show-btn"><i class="material-icons">remove</i></a>'
    },
    {
      type: 'bigItem',
      label: 'my label 2',
      shortContent: 'short description 2',
      fullContent: 'big description 2',
      showMore: '<a class="custom-show-btn"><i class="material-icons">add</i></a>',
      showLess: '<a class="custom-show-btn"><i class="material-icons">remove</i></a>'
    }
  ]
});
.custom-show-btn {
  position: absolute;
  right: 20px;
  bottom: -12px;
  background-color: #359BCE;
  border-radius: 50%;
  color: #FFFFFF;
  height: 24px;
  width: 24px;
}

getItem method

<div id="timeline-container-get-item" type="text">
<button id="timeline-get-item-button" class="btn">get item n°2</button>
$('#timeline-container-get-item').timelineMe({
  items: [
    {
      type: 'milestone',
      label: 'my label 1'
    },
    {
      type: 'smallItem',
      label: 'my label 2',
      shortContent: 'short description 2'
    },
    {
      type: 'bigItem',
      label: 'my label 3',
      shortContent: 'short description 3'
    }
  ]
});
$('#timeline-get-item-button').on('click', function() {
  var item = $('#timeline-container-get-item').timelineMe('getItem', 2);
  alert(
    'type: ' + item.type + '\n' + 'label: ' + item.label + '\n' + 'shortContent: ' + item.shortContent
  );
});

Label picto

<div id="timeline-container-label-picto" type="text"></div>
$('#timeline-container-label-picto').timelineMe({
          items: [
            {
              type: 'milestone',
              label: 'my label 1',
              picto: '<i class="material-icons">event</i>'
            },
            {
              type: 'smallItem',
              label: 'my label 2',
              picto: '<img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" />',
              shortContent: 'short description 2'
            },
            {
              type: 'bigItem',
              label: 'my label 3',
              picto: '<strong>TEXT</strong>',
              shortContent: 'short description 3'
            }
          ]
        });

To change label's picto size/background/border easily, use the SCSS file and change "$label-picto-*" files (demo will come - and if you have a better idea to handle that, I'd be glad to ear from you!).

collapse method

<div id="timeline-container-collapse" type="text">
<button id="timeline-collapse-button" class="btn">toggle collapse</button>
$('#timeline-container-collapse').timelineMe({
  items: [
    {
      type: 'milestone',
      label: 'my label 1'
    },
    {
      type: 'smallItem',
      label: 'my label 2',
      shortContent: 'short description 2'
    },
    {
      type: 'bigItem',
      label: 'my label 3',
      shortContent: 'short description 3'
    }
  ]
});
$('#timeline-collapse-button').on('click', function() {
  $('#timeline-container-collapse').timelineMe('collapse', 'toggle');
});

Relative positioning

<div id="timeline-container-relativepos" type="text"></div>
$('#timeline-container-relativepos').timelineMe({
          items: [
            {
              type: 'milestone',
              label: 'my label 1',
              relativePosition: 15
            },
            {
              type: 'smallItem',
              label: 'my label 2',
              relativePosition: 100,
              shortContent: 'short description 2'
            },
            {
              type: 'bigItem',
              label: 'my label 3',
              relativePosition: 30,
              shortContent: 'short description 3'
            }
          ]
        });

With Dates

<div id="timeline-container-relativepos-dates" type="text"></div>
var relPosDate1 = new Date(2015, 02, 05);
        var relPosDate2 = new Date(2015, 03, 01);
        var relPosDate3 = new Date(2015, 03, 10);
        $('#timeline-container-relativepos-dates').timelineMe({
          items: [
            {
              type: 'milestone',
              label: relPosDate1.toDateString(),
              relativePosition: relPosDate1.getTime()
            },
            {
              type: 'smallItem',
              label: relPosDate2.toDateString(),
              relativePosition: relPosDate2.getTime(),
              shortContent: 'short description 2'
            },
            {
              type: 'bigItem',
              label: relPosDate3.toDateString(),
              relativePosition: relPosDate3.getTime(),
              shortContent: 'short description 3'
            }
          ]
        });

Horizontal mode

<div id="timeline-container-horizontal" type="text"></div>

Default

$('#timeline-container-horizontal').timelineMe({
  orientation: 'horizontal',
  items: [...]
});

Scroll zones

$('#timeline-container-scrollzones').timelineMe({
  orientation: 'horizontal',
  scrollZones: true,
  scrollBar: false,
  items: [...]
});

Scroll arrows

$('#timeline-container-scrollarrows').timelineMe({
  orientation: 'horizontal',
  scrollArrows: true,
  scrollBar: false,
  items: [...]
});

Dynamic load

$('#timeline-container-dynamic-load').timelineMe({
  items: [...]
});
// Do stuff
$('#timeline-container-dynamic-load').timelineMe('load', [{type: 'milestone', label: 'dynamically added milestone'}]);

SASS variables

Name Description Default
$item-bg-color items background color #ffffff
$timeline-thickness timeline's line thickness 4px
$timeline-color timeline's line color #555555
$horizontal-item-sepa items separation for horizontal timeline 10px
$vertical-item-sepa items separation for vertical timeline $horizontal-item-sepa / 2
$label-bg-color items' label's mark background color $item-bg-color
$label-picto-size items' label's mark size $horizontal-item-sepa / 2
$label-picto-border items' label's mark border width 3px
$label-picto-border-color items' label's mark border color $timeline-color
$label-picto-sepa separation between item's label's mark and text 3px
$scroll-zone-width scroll zones width for horizontal timeline 50px
$scroll-zone-color scroll zones color (will be a gradient to transaprent) for horizontal timeline #8DD8DD
$scroll-arrow-width scroll arrows width for horizontal timeline 20px
$scroll-arrow-color scroll arrows color for horizontal timeline #ffffff

WORK IN PROGRESS:
- flipping item (bigItem) isn't working well in IE.
- add same customization in js that the one existing in sass.
- js unit testing