jQuery-TimelineMe

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

Items options

Methods

Events

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

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