X-Objects
Layering and Z-Order
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.
Flame on. Shelley Powers, The Burning Bird Corporation
|