With it's support for the W3C's (World Wide Web Consortium) recommendations
for the DOM Level 1 (Document Object Model) and CSS Level 1 (Cascading
Style Sheets), Netscape has in effect pulled the rug out from under
Netscape 4x DHTML development. NS6's lack of compatibility with
earlier Netscape browsers presents a daunting challenge. Developers
grumble, wondering what could be so exciting about having yet another
browser to deal with.
Nonsense, I say. There's plenty to be excited about! NS6 offers
powerful DHTML functionality, far beyond that of Netscape 4. Many
of these techniques also work in Internet Explorer (IE) 5, so now
there is an opportunity to write DHTML that requires little or no
browser-specific coding. With NS6 in circulation, the Big Two browsers
are more similar than ever before. And above all, DHTML in NS6 is
easy.
In this article, I'll show you some basic but powerful techniques
for handling DHTML in NS6. I'll cover what you need to repair your
current DHTML and get it working in this new browser. I'll also
look at IE's support for these techniques.
This article focuses on using JavaScript to manipulate block-level
<DIV> elements, also referred to as layers. For the purposes
of this tutorial, the terms "layer" and <DIV> are
interchangeable, although you should note that "layer"
does not refer to Netscape 4x's <LAYER> tag, which is no longer
supported in NS6. I'll start by examining what's new in NS6 and,
just as importantly, what's missing.
Something Old, Something New
The most notable casualty of the switch to standards support is
the document.layers collection, which was used in earlier Netscape
browsers to access positioned layer elements. NS6 no longer supports
the document.layers collection. Nor does NS6 support Internet Explorer's
document.all collection for accessing HTML elements. Instead, you'll
find two new W3C DOM-compliant document methods for retrieving page
elements. The first method, getElementById,
lets you reference any element within the document by supplying
the element's ID (specified in the HTML tag's ID attribute--you
did remember to assign IDs to all your positioned content, right?).
For example, here's a sample <DIV>
tag (I'll use this sample throughout this article):
<div
id="sampleDiv"
style="position:absolute; left:300px; top:200px;
width:200px; height:100px; background-color:#ff0000;
visibility:visible;
clip:rect(0px 200px 100px 0px);">
</div>
