Timeline Basics

A timeline (live samples at right) contains one or more bands, which can be panned infinitely by dragging with the mouse pointer. A band can be configured to synchronize with another band such that panning one band also scrolls the other.

A timeline is implemented as a div element that contains inner div elements as its bands (right). The band divs are cropped and positioned relative to the timeline div.

A band div itself contains several inner elements that implements various parts of the band. For example, the two timelines above show labels for days, weeks, months, and years. The bands also have different background colors, and the weekly band of the second timeline has weekend markings. All of these visual elements are "painted" by adding HTML elements to the band divs at the appropriate positions.

As a band is panned, its div is shifted horizontally or vertically, carrying all of its visual elements along. When either end of the band div approaches the visible (non-cropped) area, the band div is re-centered, its coordinate origin is changed, and then its various visual elements are re-"painted" relative to the new coordinate origin. All of this "paging" is done as seamlessly as possible so that the user experiences smooth, infinite panning.

A band is responsible for supporting panning as well as coordinating its various sub-components:

The band also takes an event source which provides events to be displayed in that band. Different bands can have different event sources. This flexibility allows for timeline mashups, as exemplified here. Various sub-components that do painting take a theme, which stores default visual and behavioral settings.


Related Topics