Copy found at Wayback Machine archive.
| Internet Explorer 6.x differs from IE 5.x in one very important area: In IE 6.0 and up, units must be specified with all CSS styles that take units, if you use some combination of CSS positional attributes — what combination, exactly, I haven’t been able to figure out yet. This includes width, height, as well as the positional attributes of top, left, bottom, and right. In IE 5.x and lower, as well as Mozilla and Netscape, positional attributes were given a default unit of pixel.
The index card example in this chapter didn’t specify pixels with the positional attributes, and the results were completely wrong. However, after a quick fix, the example’s just fine now. That’ll teach me to be sloppy. Units should be specified in all uses. |
DHTML developers can layer HTML elements one on top of each other, using a combination of visibility to hide and show elements located in the same location, or by using the CSS z-order style attribute, or both. You’ve had a chance to see visibility, but we’ll take a look at z-order layering in this section, as well as looking at layering using both techniques.
The z-order methods exposed on the X-Objects interface are:
- objGetZIndex – to get the element’s current z-order, if set
- objSetZIndex – to set the element’s current z-order
Again, Navigator 4.x has unique implementations for setting and getting the z-order:
// set element's zindex order
function nsobjSetZIndex(zindex) {
this.css2.zIndex = zindex;
}
// get element's current zindex order
function nsobjGetZIndex() {
return this.css2.zIndex;
}
The DOM compliant versions of objGetZIndex and objSetZIndex again use the Style object to change or access the current settings:
// set element's zindex order
function domSetZIndex(zindex) {
this.css2.style.zIndex = zindex;
}
// get element's current zindex order
function domGetZIndex(zindex) {
return this.css2.style.zIndex;
}
Testing z-order and layering
Instead of creating new examples to test layering, I modified existing DHTML examples to use the new X-Objects.
The first example is an emulation of a graphical button that doesn’t require an HTML form, or the use of form elements. Intead, the example uses two DIV blocks, both containing the same image, but each with a different image border. One border is set using the CSS outset setting, one using the inset setting.
The two images with the different CSS borders are layered on one another. Clicking (mouse down) on the image “hides” the top image by changing its z-order to a lower order than the image in the bottom layer. The mouse up event changes the z-order of this image layer to a higher number again, returning the “button” to the unclicked state.
Try this button effect created using X-Objects by accessing the Button page. View the source to see the code for the example.
Stacked Index Card Example
A second example I modified to use the new X-Objects is a stacked index card application. A group of names are created as separate layers each stacked on the others, with only the topmost layer being visible. Clicking on the Next and Prev command texts shows the next or previous card in the “stack”. When you access the last card in the stack, a surprise occurs: the text-based card navigation icons are replaced by labeled tabs above the cards. Clicking on the tabs displays the address associated with the tab. View the Index Card Example View the source to see the code for the example.