Working on opacity and cross-browser issues
Worked on making the apparatus fade out when you're reading in the poem, and vice versa. The opacity issues are fairly straightforward: as usual, IE is the rogue component, because it doesn't support opacity according to the specs, so what I've ended up doing is this (where lastFadedObj is the object being faded out):
lastFadedObj.style.opacity = '.2';
//Hack for IE
if (document.all){
lastFadedObj.style.filter = 'alpha(opacity=20)';
}
The other problem was identifying the poem and apparatus divs themselves. Because of the possibility that poems might share the same page in some views, they have unique ids, so they can only be identified by part of their id or by class. This is working OK, but I think it needs to be refactored in future; I'd prefer to be using the unique component of the ids for this task, so that if you were looking at multiple poems, the code would still work specifically to the poem you were clicking on. I've prepared for this by wrapping both the poem and apparatus in a <div id="LDev001-TM1479" class="poemAndApparatus">
</p>; this will allow me to go up the tree from the sender of a click event to the ancestor container, and then collect its id, and use it to find the child container which needs to be faded.
Tested the code on all the usual suspects, and it works well in Opera, Firefox, IE7 (with special fixins), Safari and Webkit. Konqueror is odd in three ways, though: first, it offsets the line-numbering by one line, for no reason I can see; second, it doesn't respond to the fading code; and finally, perhaps as compensation, it's the only browser that DOES correctly show the alternate table row shading from CSS3's nth-child settings on the TOC page; all the other browsers ignore this.
Next is to refactor as above; then animate the fading. After that, we need to work on the abbreviations, which are an interesting challenge.