SIMILIE Timeline - Link the Date Labels (Firefox fix)

As I mentioned in my previous post, to make the labller clickable, because there are two additional layer on top of the layer where labellers are on, firefox won't let you click "through" the top two layers.  Finally tonight, I got it working. An example can be seen here

There is one catch. This only applies to the bands where the "clickable" events do no belong to. I guess you can use Ajax to dynamically retrieve the events based on what you clicked that way. Another solution I'm thinking is maybe to "remember" the locations of events. If you clicked on the "hotspot", then switch zIndex and use javascript to click that event link?

Anyway, so back to my original "basic" clickable issue, I tested quite a few solutions and I didn't came up with any feasible ones. Then out of desperation, I wondered, so what if I switched the layer? would that work?

by default, the labeller layer has a zIndex of 100, on top, there is another layer with zIndex 105 and another with zInex 110. So what if I make the labeller layer 111? To be the top most layer?

The best way is to test it out.

In ether.js, you have three places where this layer is created.

1. Timeline.GregorianEtherPainter.prototype.paint = function() {
          this._markerLayer = this._band.createLayerDiv(100);
     }

2. Timeline.HotZoneGregorianEtherPainter.prototype.paint = function() {
          this._markerLayer = this._band.createLayerDiv(100);
     }   

3. Timeline.YearCountEtherPainter.prototype.paint = function() {
           this._markerLayer = this._band.createLayerDiv(100);
    }

Simply change 100 to 111, worked for me in Firefox 1.5 and IE 6.0

In addition, instead of make the labeller an html link like the previous post, I wanted to pass a javascript to the link, so when you click on it, the script function will be inovked, so follow the exact principal of last post, I added another property called

labellerLinkOnClick and the getter function .getLabellerLinkOnClick

The only difference is in step 6 and 7, I want to give labellerLinkOnClick precedence over labellerLink, meaning if both are present, labellerLinkOnClick will be used instead, so modified
that part a little bit and now it becomes

        var link = band.getLabellerLink();
        var linkOnClick = band.getLabellerLinkOnClick();
       
        var div = timeline.getDocument().createElement("div");
       
        if(linkOnClick!=null)
        {
            label.text = label.text.toString().replace(/ /g, " ");
            div.innerHTML = "<a href='#' onClick="+linkOnClick+"('"+label.text+"')>"+label.text+"</a>";
        }
        else if(link!=null)
        {
            div.innerHTML = "<a href='"+link+"?month="+label.text+"'>"+label.text+"</a>";   
             //div.innerHTML = label.text;
        }
        else{
            div.innerHTML = label.text;
        }

labllerOnClick takes a function name and will pass the labller text to your function.

lastly, in step 7 of last post, do

bandInfos[2].labllerOnClick = "your javascript function name";

such as

bandInfos[2].labllerOnClick = "WhatMonth";

function WhatMonth(whichmonth)
{
    alert("you clicked :"+whichmonth);
}