spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column28


Width Handling

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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.

http://www.internet.com


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger


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

URL: http://www.webreference.com/js/column28/width.html