Introducing DOCJSLIB Version 2.0: Width Handling - Doc JavaScript

Width Handling

The DHTML element width is one of the least consistent properties across the two browsers. Setting the initial width is consistent, though, because DOCJSLIB 2.0 sets the element's width 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 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/width.html