Netscape 6 simplifies
cross-browser DHTML development
by Scott Andrew LePera
In Part I, you learned about how Netscape 6 (NS6) differs from earlier versions with its
support of the Document Object Model (DOM) and Cascading Style Sheets (CSS), as specified by
the World Wide Web Consortium's recommendations. You saw how to retrieve element references with
the getElementById and getElementsByTagName methods, and how to set a <DIV> element's
positioning and visibility by way of JavaScript and the style collection.
In Part II, I'll show you how to use the same techniques to handle more sophisticated DHTML.
As in Part I,
these techniques work in Internet Explorer 5 (IE5) as well as NS6, allowing for cross-browser
functionality without all that unseemly cross-browser scripting.
Sizing
Retrieving the current size of a layer is easy. Simply refer to the layer's width and height style
properties:
var myElement = document.getElementById("sampleDiv");
var w = myElement.style.width;
var h = myElement.style.height;
alert("This layer is " + w + " by " + h + " in area.");
The resulting dialog would display:
This layer is 100px by 100px in area.
Assign new values to change the size of the layer. The following example resizes the sample
<DIV> to a 200 by 50 pixel rectangle:
var myElement = document.getElementById("sampleDiv");
myElement.style.width = "200px";
myElement.style.height = "50px";
You can easily write a utility function to resize any layer:
function resize(layerID,width,height){
var myElement = document.getElementById(layerID);
myElement.style.width = width + "px";
myElement.style.height = height + "px";
}
HTML content within the layer will reflow to fit the new size. Sometimes the amount of
content will be larger than the size of the <DIV> can display. How the browser
handles this is dependent upon the element's overflow style property.
When overflow is set to hidden, the browser will simply not show the content beyond the
edges of the <DIV>. Setting overflow to auto allows scrollbars to appear along the edges
of the <DIV> as necessary. If overflow is set to scroll, scrollbars will appear even if
there is no overflowing content. You set overflow just like any other style property.
var myElement = document.getElementById("sampleDIV");
myElement.style.overflow = "auto";
Bear in mind that if you declared clip values in pixels, the clip will not change to match
the new width and height. A <DIV> clipped to a 50-pixel square will remain clipped to
a 50-pixel square, even after it's resized to a 200 x 175 pixel rectangle. To work around
this, you have two options. The first is to use auto in place of pixels as the clip values:
clip: rect(auto auto auto auto);
The second option is to dynamically resize the clip.
