stantoxt / Timeline

A beautiful vertical timeline made with Tabletop.js, Isotope.js & Handerlbarz.js. A collaboration between Balance Media and WNYC/John Keefe.

Super Awesome Vertical Timeline

Timeline shows a series of events in a vertically time-sorted structure.

Timeline utilizes a handful of super cool libraries, including Tabletop.js (for the data storage) and Isotope for the layout.

A running example can be found here.

How to Use

1) Set up your data using Tabletop.js

Create a Google Spreadsheet with the following columns:

• title
• date
• display date
• photo url
• caption
• body
• read more url

Please note that the the display date column must be in the format Month day, Year (April 25, 2012) for proper javascript parsing. Also, all columns must be plain text format, including the two date columns.

Now follow the instructions over at Tabletop.js to publish the Spreadsheet.

The Spreadsheet used in the example index.html file is at https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc

2) Insert the Spreadsheet key into script.js

Find your Spreadsheet key (see Tabletop.js for instructions), and replace the sample key on line 3 of js/script.js with the key to your Spreadsheet.

You also need to update the name of the spreadsheet 'sheet' that holds the data on line 4 of 'js/script.js'.

3) Enjoy!

Bugs

• None? Tested on Chrome, Firefox, Safari, & IE 7-9.

Possible Improvements

• Turn this into a jQuery plugin.
• Remove hard coded Tabletop.js Spreadsheet key
• Remove hard coded #timeline element from script, and allow for multiple Timelines per page

Credits

Balance Media for the design and coding.

The following plugins/libraries are used: jQuery, Isotope, Tabletop.js, Handlebars.js, jQuery imagesLoaded plugin, and jQuery resize event

NOTE: All of the elements are free for non-commercial use. Commercial use of Isotope requires a $25 license.