SIMILIE Timeline - Link the Date Labels

I was playing with the SIMILIE timeline the other day and thought it would be nice to add links to the labels and point it to anywhere as if they are regular .href property. Note, it only works in IE right now, not because of of the javascript here, but because the css design adds an extra Div on top of the band, firefox prevents the underyling link to be clickable. Still searchign solutions for it.

1.  Open up your /api/scripts/timeline.js and find

Timeline.createBandInfo = function(params) { }

 and

Timeline.createHotZoneBandInfo = function(params) {}

2. add the following to the end of both functions just bebefore their "return" statements

var labellerLink = null;

if("labellerLink" in params){

labellerLink = params.labellerLink;

}

return { ...}

3.  at the end of both return functions add this property

       return{
        .... ,
        .... ,
        labellerLink:   labellerLink
     }

4. Find  Timeline._Band = function(timeline, bandInfo, index) {} function and find this._onScrollListeners = [] property,  right after that, add this...

this.LabellerLink = bandInfo.labellerLink;

5.    Anywhere after Timeline._Band , find a place and add this function

Timeline._Band.prototype.getLabellerLink = function()

{

return this.LabellerLink;

}

6.  Open up your /api/scripts/ether.js and find this.createIntervalMarker = function(),  towards the end of it,  you'll see something like this...

var div = timeline.getDocument().createElement("div");
div.innerHTML = label.text;

7. Almost done. Now, go to your html page where you instantiated your timeline, find the place where you normally do stuff like

bandInfos[1].syncWith = 0;

bandInfos[1].highlight = true;

bandInfos[2].syncWith = 1;

bandInfos[2].highlight = true;

Say, I want to add a url to BandInfo #2? Doesn't matter if it's hour, month, year or whatever, just do bandInfos[2].labellerLink = "your_url.com";  and all labels will have a url like  

your_url.com?param=whatever

That's it.

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS