Pop-out Elements: Toggling an Element - Doc JavaScript

Toggling an Element

As explained earlier in the column, the pop-out element's show property defines the element's visibility status. The showElement() method toggles the element; it expands and collapses it. First take a look at the method:

function showElement() {
  this.show = !this.show;
  var pos = (this.show) ? this.width : 0;
  if (NS4) {
    var str = (this.show) ? 'show' : 'hide';
    eval('document.' + this.id + 'img.left = ' + pos);
    eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
    eval('document.' + this.id + 'box.zIndex = ' + maxZ);
    eval('document.' + this.id + 'box.visibility = "' + str + '"');
  } else {
    var str = (this.show) ? 'visible' : 'hidden';
    eval(this.id + 'img.style.left = ' + pos);
    eval(this.id + 'img.style.zIndex = ' + (++maxZ));
    eval(this.id + 'box.style.zIndex = ' + maxZ);
    eval(this.id + 'box.style.visibility = "' + str + '"');
  }
}

The function's first statement inverts the element's show property. If it is true it becomes false, and vice versa. The local pos variable determines the horizontal position of the pop-out element's tab. If the element is expanded (this.show is true), the tab is positioned this.width pixels from the left side of the page.

In Navigator 4.0x the style elements of a positioned element are properties of document.elementID. In Internet Explorer 4.0x they are properties of elementID.style or document.all.elementID.style

The showElement() method sets the tab element's left property to pos. The box element's visibility is set to str, a local variable that defines the visibility status of the element.

The most interesting statement is the one that sets the zIndex property of the tab and box. Remember that maxZ is a global variable. Its job is to hold the zIndex of the topmost element. Therefore, we increment it whenever a pop-out element expands (or collapses, because we're too lazy to check). The element in action is assigned the new value of maxZ, so it appears on top of all other elements. The statements:

eval('document.' + this.id + 'img.zIndex = ' + (++maxZ)); // NS4
eval('document.' + this.id + 'box.zIndex = ' + maxZ); // NS4
eval(this.id + 'img.style.zIndex = ' + (++maxZ)); // IE4
eval(this.id + 'box.style.zIndex = ' + maxZ); // IE4

first increment maxZ, and only then assign the new value to the zIndex property of the pop-out element's components (the tab and box). See Column 13 for additional information on referencing CSS-positioned elements via JavaScript.

Created: February 24, 1998
Revised: February 24, 1998

URL: https://www.webreference.com/js/column14/show.html