jQuery timeline control with support for stacking events.
$('.eventcontrol').EventControl({
oncreate: function(item, element) {
// Called when creating the item.
// Can set attributes on the element here,
// for example:
element.css('color', 'red');
},
onhover: function(item, element, event, inout) {
// Called when mouse hovers over an item
// inout is 'in' when entering, and 'out' when exiting.
},
onclick: function(item, element, event) {
// Called when an item is left-clicked.
},
data: [], // An array of objects with a timestamp key.
hammertime: true, // Enable use of hammer.js to support touch devices
items_height: 101, // height in px of item/event area
markers_height: 31, // height in px of markers area
displayUTC: false, // Show timestamps as UTC, else local time
});
Once created, the EventControl object can be accessed as demonstrated below. Right now, there is no support for updating the dataset, I plan to add this later.
var state = $('.eventcontrol').EventControl(); // save state
$('.eventcontrol').EventControl(state); // restore state
// zoom in / out: focus is (0 - 1), optional, default is 0.5
$('.eventcontrol').EventControl('zoom-in', focus);
$('.eventcontrol').EventControl('zoom-out', focus);
The library can optionally use hammer.js to support basic touch controls. Supporting pinch to zoom interferes with all kinds of functionality, so you'll probably want to hook up zoom in/out to separate controls.