diff --git a/README.md b/README.md index 6a58b4e..6e21082 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,13 @@ -# Super Awesome Vertical Timeline +# jQuery 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](http://github.com/jsoma/tabletop) (for the data storage) and [Isotope](http://isotope.metafizzy.co/) for the layout. - -A running example can be found [here](http://builtbybalance.com/github-timeline/). +Forked from the [Super Awesome Vertical Timeline](https://github.com/balancemedia/Timeline). A running example can be found [here](http://minnpost.github.com/jquery-vertical-timeline/example.html). Please see the Credits below for some restrictions on use. ## How to Use -### 1) Set up your data using Tabletop.js +### Data + +Create a Google Spreadsheet with the following columns (see options for different names) and publish it. An example can be found [here](https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc#gid=0); -Create a Google Spreadsheet with the following columns: * title * date * display date @@ -20,29 +17,125 @@ Create a Google Spreadsheet with the following columns: * 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](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'. +**Also, all columns must be _plain text_ format, including the two date columns.** -### 3) Enjoy! +### Include CSS and JS + +Include the CSS: + + + +Include the Javascript. The following is the un-minified and un-combined version. + + + + + + + + + +OR, use the built version (note, this will only be updated with a specific version): + + + + +### Run + +First, include a container for the timeline: + +
| t |