How to use Timeline offline

From SIMILE Widgets
Jump to: navigation, search


Using Timeline offline

It is very simple to run Timeline locally, i.e. without being connected to the LAN/WAN. No web server is necessary, though you will need to download the Timeline libraries

Get the Timeline source

Go to Google code and download either the full source or bundled libraries. The full source gives you all the sub libraries (labels, sources, etc.) as separate files. In the bundled version, the code has been condensed in to a smaller number of files and the code 'minified' (note the latter makes it unsuitable for de-bugging use). Functionally, the two sets should be the same, so choose according to your needs - you can always swap from one to the other.

Unpacked, the zips give a folder called timeline_n.n.n (n being the version numbering). Unless you're going to run multiple versions side by side, you can change this root folders name as desired. Tip: if using on a local IIS server and you want to keep the version number, vendor-advised security settings my prevent IIS serving a URL where there are periods in folder names as it is treated as hostile code; in such context change timeline_n.n.n to timeline_n-n-n of the like.

In the rest of the article below it is assuned you've renamed the unpacked zip folder to just timeline

What files to reference

Firstly, ignore the instructions found in the comments at the head of (some) timeline-api.js file source. It's wrong and will hopefully be deleted or corrected. For local use of the above libraries you only need to locate 2 files: simile-ajax-api.js and timeline-api.js

Assuming the above root folder, the relative paths are - for bundled code:


...and for the full source:


Calling the files

The order in which the 2 files are loaded does matter. The AJAX file should be called/loaded first. Thus for bundle use, add this you the HTML page's <head> section

<script src="timeline/timeline_ajax/simile-ajax-api.js?bundle=true" type="text/javascript"></script>
<script src="timeline/timeline_js/timeline-api.js?bundle=true" type="text/javascript"></script>

For full source:

<script src="timeline/src/ajax/api//simile-ajax-api.js?bundle=false" type="text/javascript"></script>
<script src="timeline/src/webapp/api/timeline-api.js?bundle=false" type="text/javascript"></script>

After this load you Timeline initialisation and other JS code either inline or via another '.js' library file.

Debugging notes. If you get the AJAX reference wrong and the API one right, your events will load but the event bubbles will open without their border images (i.e. as a borderless rectangle). If you get the API reference wrong (regardless of whether the AJAX loads) you'll get a blank box where the timeline should be.

Can offline timelines be customised?

Yes, in just the same way as with a site referencing the files on SIMILE's server. In both scenarios, the key thing is to load the main libraries first. For those not expert in Javascript this means any other <script> tags in your HTML doc should come after the above calls to the AJAX and API libraries. For instance:

<script src="timeline/timeline_ajax/simile-ajax-api.js?bundle=true" type="text/javascript"></script>
<script src="timeline/timeline_js/timeline-api.js?bundle=true" type="text/javascript"></script>
<script src="scripts/my-custom-tl-code.js?bundle=true" type="text/javascript"></script>
<script src="scripts/initialise-tl-code.js?bundle=true" type="text/javascript"></script>
Personal tools