Super Awesome Vertical Timeline
Timeline shows a series of events in a vertically time-sorted structure.
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:
- display date
- photo url
- read more url
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'.
- None? Tested on Chrome, Firefox, Safari, & IE 7-9.
- Turn this into a jQuery plugin.
- Remove hard coded Tabletop.js Spreadsheet key
- Remove hard coded
#timelineelement from script, and allow for multiple Timelines per page
Balance Media for the design and coding.