Click on each item to get a snippet about the basics of using Timestack. You can see the code here here. It runs live here.
You can embed arbitrary HTML into the list items. They won't show up in the timeline, but they're available to the callback. You can even include nested lists,
Data about the item is passed to the click callback. It looks like this:
{
tilNow: false, //does the item have an end time?
start: moment, //a moment object representing the start time
end: moment, //a moment object representing the end time
title: 'Contact Networks', //the value of the data-title attribute
color: '#00000', //the value of the data-color attribute
content: jquery, //a jquery object containing the LI's children
timeDisplay: 'Dec 2005 - Nov 2007' //the date/time range rendered on the item
}
Here's how we use it on this page:
$(function(){
$('#timeline').timestack({
click: function(data){
$('#title').text(data.title);
$('#dates').text(data.timeDisplay);
$('#content').empty().append(data.content);
}
});
});
You can pick a background color using the data-color attribute. Otherwise, you'll just get the color from the CSS sheet.
You don't need an end date. Timestack treats the date as now, but doesn't display the time.
Dates can overlap. Items are shown in the order they appear in the UL.
For more about the options--there are a bunch--check the docs.