Introducing DOCJSLIB Version 2.0: zIndex Handling - Doc JavaScript

zIndex Handling

The DHTML element's zIndex property is crucial for achieving artistic effect via partial covering of images and boxes. Whenever there is an overlap of elements on the normally two-dimensional window, the elements' zIndex values determine their relative order in the z direction. The element with the higher zIndex will be on top, the one with the second largest value will be positioned under the first one, and so on. The element with the lowest zIndex will be placed on the bottom of the heap. Setting the initial zIndex is consistent across browsers because DOCJSLIB 2.0 sets the element's zIndex in the <STYLE> HTML tag, which is, of course, standard. DOCJSLIB 2.0 includes two models, the image model and the box model. Our image model's <STYLE> tag is the following:

'<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
'</STYLE>'

Similarly, our box model's <STYLE> tag is the following:

'<STYLE TYPE="text/css">',
    '#', boxID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, '; top: ', posFromTop, ';',
      'width: ', boxWidth, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: ', visibility, ';',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
'</STYLE>'

DOCJSLIB 2.0 initializes all elements' zIndex to 1. The application can modify the an element's zIndex by calling the DOCJSLIB's setZposition() function. Similar to previous functions we have already discussed, the function accepts two parameters, the element's id and the requested zIndex:

function setZposition(id, z) {
  if (NS4) {eval("document." + id).zIndex = z}
  else {eval("document.all." + id).style.zIndex = z}

See previous pages for explanations about the different referencing in Internet Explorer and Netscape Navigator.

includes the getWidth() function that retrieves the element (image or box) width from its object representation. The only parameter needed for this function is the element ID, the string you assign this element when creating it via the makeImage() or the makeBox() function. Here is the function:

function getWidth(id) {
  if (NS4) {return eval("document." + id + ".clip.width")}
  else {return eval("document.all." + id + ".style.pixelWidth")}
}

Notice how different the width properties on Internet Explorer and Netscape Navigator are. The width property on Netscape Navigator does not descend directly from the element, but rather from its clip property. The <DIV> tag we are using is of a Layer type, and the DHTML element is a clipping out of the layer. The clip's other properties are height, top, right, left, and bottom. On Internet Explorer, the right property to use is the pixelWidth. Other properties return the units of measurements next to the numeric value, and hence cannot be fed to other computations.

Created: October 26, 1998
Revised: October 26, 1998

URL: https://www.webreference.com/js/column28/zindex.html