Time­Line.js

multitouch timelines for javascript

Touch Controls

• pinch-to-zoom.
• drag anywhere away from the line to pan
• drag any number of control points to edit the line
• tap a control point to delete it
• tap away from a control point to create a new one.

Mouse Controls

• mousewheel up/down to zoom in/out
• mousewheel left/right to pan
• click and drag outside the line to pan
• click and drag a control point to edit the line
• click a control point to delete it
• click away from a control point to create a new one.

API Basics

include timeline.js

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="http://www.russellmcc.com/timelinejs/timeline.min.js"></script>

create a div with a height

<div id="timeline" style="height:200px;"></div>

initialize the timeline

$("#timeline").timeline();

it looks like this:

Initial­ization Options

pass in an object to the initialization to set the options

$("#timeline").timeline({
   fgColor: 'chartreuse',
   ptColor: 'violet',
   dragColor: 'aqua',
   ptRadius: 30,
   points: [[.25, .5], [.5,.75], [.75,.5]]
});

available options

• fgColor: The line color in hex. default: '#CFF09E'
• ptColor: The point color in hex. default: '#3B8686'
• dragColor: The color of dragging points in hex. default: '#79BD9A'
• minRegion: the length of the screen at the maximum zoom level. default: 0.000003
• ptRadius: the drawn radius of the points. default: 10
• tapTimeout: the number of milliseconds before a tap is counted as a drag default: 300
• tapRadius: the number of pixels a tap can move before it's counted as a drag. default: 10
• points : the initial points as an array of two-element arrays.
• visibleRegion : the initial visible region as a two-element array.

Resizing

resize like this:

$("#timeline").timeline({points:[[.5,.5]]});       
$("#timeline").timeline('resize', 200, 200)

Setting points

just get the timeline object and call setPoints. Don't do this during a drag.

$("#timeline").timeline({points:[[.5,.5]]});       
$("#timeline").timeline().setPoints([[.25,.25], [.75,.75]])

Getting points

$("#timeline").timeline({points:[[.5,.5]]});
var updatePoints = function(){
    var points = $("#timeline").timeline().getPoints();
    var str = "<dl>";
    for(var i = 0; i < points.length; ++i) {
        str += "<dt>" + points[i][0].toFixed(2) + "</dt>";
        str += "<dd>" + points[i][1].toFixed(2) + "</dd>";
    }
    str += "<dl>";
    $("#points").html(str);
}
$("#timeline").bind('change', updatePoints);
updatePoints();