Chapter 12: Advanced Cascading Style Sheets
289
In addition to ensuring that nothing is ever less than zero, you must also be sure that nothing is ever greater than 100, the maximum z-index value that you can have, as the following example shows: onclick=”if (document.all.blue.style.zIndex < 100 { document.all.blue.style.zIndex += 1; } if (document.all.green.style.zIndex > 0) { document.all.green.style.zIndex -= 1; } if (document.all.red.style.zIndex > 0) { document.all.red.style.zIndex -= 1; }
To understand what’s wrong with this seemingly reasonable solution, open this example from the book’s Web site (http://www.intuitive.com/coolsites/) and click the red layer a half-dozen times, then click the blue layer. The result that you want is for the blue layer to move to the front after you click, but it doesn’t work. Clicking the red layer a half-dozen times increments its z-index each time, resulting in a red z-index of 7 (after starting out at z-index: 1, remember). Clicking blue then sets its z-index to 1 (after starting at 2 but decrementing to zero because of the clicks on red) and decrements the red layer from 7 to 6. Four more clicks on the blue region are necessary before the blue layer correctly moves to the top. The complete solution is actually to write a sophisticated JavaScript function that checks the value of the other layers and ensures that the layer that you want increments sufficiently to move to the front. Subsequently clicking that layer doesn’t result in any change in z-index values.
note
Netscape Navigator includes a built-in method (a fancy name for a subroutine) to accomplish what you want: moveAbove(id). However, it requires that you use the Netscape <layer> approach to layers rather than the more standard CSS <div> tags, as shown here.
A JavaScript function implementing the moveAbove concept might look like this: <script language=”JavaScript”> function moveAboveIt(id1, id2) { id1o = eval(“document.all.”+id1+”.style”);
id2o = eval(“document.all.”+id2+”.style”);
if (id1o.zIndex > id2o.zIndex) {
return 1; // already above, nothing to do
}
if (id2o.zIndex == 100) { id2o.zIndex -= 1; }
id1o.zIndex = id2o.zIndex + 1;
return 1;
}
</script>