1. Start
  2. About TimelineXML
  3. Installation
  4. How To Use
    1. Step 1: The HTML
    2. Step 2: Fill the content using an XML file.
    3. Step 2a: Fill the content using HTML
    4. Step 3: Call the plugin

TimelineXML

User Manual

About TimelineXML

TimelineXML is a jQuery plugin that lets you display an interactive timeline from a list of events. It would fit nicely with blogs, corporate websites, portfolio sites and many more.

Installation

It installs like every other jQuery plugin. Include the CSS and JS files in the header of your file and you’re done! Examples:
 
<script src="path-to-script/timelinexml.js"></script>
<link rel="stylesheet" href="path-to-stylesheet/timelinexml.css">
 
Some of the included designs need an image file, you will find it in the “img” folder. Put it where the rest of your images are, and most likely you will need to replace the path in the .css file. It’s easiest to do using “Find and Replace”.
 

How To Use

 
There are three things that you need to do:
 
  1. Add an HTML element that will hold the timeline
  2. Fill the content
  3. Call the plugin
 
It’s really simple, here is it explained in detail:
 

Step 1: The HTML

A simple <div> tag with an ID will do just fine:
 
<div id=”my-timeline”></div>
 
That’s the element that will hold the HTML for the entire timeline. You are free to position and style it however you like, you won’t brake anything. The ID is not necessary, it’s just for convenience when you call the script. Of course you can use any CSS selector that you like, more on that later.
 

Step 2: Fill the content using an XML file.

 
This is the file that will hold the content for the timeline.
 
New XML file
 
Make a new .xml file, name it however you like. For this example we will call it timeline.xml and we’ll place it in the main project folder (where the index.html is).
Open timeline.xml with a plane text editor like Notepad, TextMate, Notepad++ etc. and add the header:
 
<?xml version="1.0" encoding="UTF-8" ?>
 
 
Now it’s time to fill the content. First, add a <timeline> tag:
 
<timeline></timeline>
 
Inside the <timeline> tag start adding events, like this:
 
<event>
    <date>12.03.2004</date>
    <title>The title</title>
    <thumb>img/thumb1.jpg</thumb>
    <content>
    The text
    </content>
    <link>http://a-link-leading-to-the-full-text</link>
</event>
 
There are a few things to note here:
 
The link and thumb are optional
You must follow the exact same format for the date! Otherwise the plugin won’t parse it correctly and the event won’t be placed in the correct position.
 
You can also reference the sample .xml file that came with the plugin. When you are done, save and close the file and that’s all there is to the .xml file. Moving on to...
 
 
Existing XML file
 
As of version 1.3, you can now use any existing xml file. However, to make it work with the plugin, you need to tell it which tags to parse from the file. That is done with parameters passed to the plugin. To read about all parameters, see step 3.
 
 

Step 2a: Fill the content using HTML

 
While using xml is recommended, you can use HTML if you need to. Here is what your html needs to look like:
 
<div class=”timeline-html-wrap”>
    <div class=”timeline-event”>
    <div class=”timeline-date”>12.03.2004</div>
    <div class=”timeline-title”>The title</div>
    <div class=”timeline-thumb”>img/thumb1.jpg</div>
    <div class=”timeline-content”>
        The text
    </div>
    <div class=”timeline-link”>http://a-link-leading-to-the-full-text</div>
</div>
 
Notes:
The class names don’t need to be the same, but those are the defaults and if you decide to use other class names you need to specify that as a parameter when you call the plugin. Read more about the parameters in Step 3.
The plugin only takes information from those elements and it leaves them unchanged. Which means that they can still be somewhere in your page (as articles for example), but you still need to consider the class names (see the note above)
 

Step 3: Call the plugin

 
The final step is to call the plugin, like this:
 
$('#my-timeline').timelinexml({ src : 'timeline.xml' });
 
Or if you are using HTML as an input, you need to specify the wrapper element for the content, like this:
 
$('#my-timeline').timelinexml({ src : $(‘.timeline-wrap’) });
 
#my-timeline - that’s the selector that we use to specify in which element to put the timeline. In this case we are referencing an element with an ID “my-timeline”
 
 
Parameters:
 
General:
 
src
specify the path to the .xml file, relative to the file from which you call the plugin. For example, if you put that line in script.js, which is included in index.html, the path should be relative to index.html
 
showLatest
shows the title of the latest event on page load
 
selectLatest
shows the title and content of the latest event on page load
 
If you are using an existing XML file:
 
eventTagName
The name of the tag containing the event
 
dateTagName
The name of the tag containing the date
 
titleTagName
The name of the tag containing the title
 
thumbTagName
The name of the tag containing the path (only the path) to the thumbnail image
 
contentTagName
The name of the tag containing the main text
 
linkTagName
The name of the tag containing the link.
 
 
If you are using HTML:
 
The parameters to the same thing as the above ones, but instead of a tag name in an xml file you specify the class name of an HTML element.
 
htmlEventClassName
htmlDateClassName
htmlTitleClassName
htmlThumbClassName
htmlContentClassName
htmlLinkClassName
 
Example:
 
$('#my-timeline').timelinexml({ src : 'timeline.xml', showLatest : true, selectLatest : false });
 
That’s all, TimelineXML should be up and running!