 | Web Design in a Nutshell, 2nd Edition |  |
All of the DHTML examples we've looked at in this chapter depend on features of the DOM Level 1 and DOM Level 2 standards, which means that they only work in the latest web browsers, Netscape 6 and Internet Explorer 5.5. This means that if you use one of these examples, you must first check for the user's browser type and version, so that you can make sure that the browser supports the script. Each of the example scripts should begin like this:
<script language="JavaScript">
var isNN4, isIE4, isDOM;
if (document.getElementById) {
isDOM = true;
}
else {
if ( parseInt(navigator.appVersion) == 4) {
if ( navigator.appName == "Netscape" ) {
isNN4 = true;
}
if ( navigator.appName == "Microsoft Internet Explorer" ) {
isIE4 = true;
}
}
}
</script>This code checks the identity and version of the browser and sets the appropriate variable to true: isDOM for a standards-compliant version of Navigator or IE, isNN4 for Netscape Navigator 4, or isIE4 for IE 4.
Once we have tested the user's browser and set the appropriate variable, we can use that variable to run the right browser-specific code:
if (isDOM) {
// Insert W3C DOM-based DHTML here
}
else if (isIE4) {
// Insert IE 4 DHTML here
}
else if (isNN4) {
// Insert Navigator 4 DHTML here
}The DHTML code that we've used to access and manipulate layers works only in the latest web browsers. If you need to support the 4.0 browsers, there are a few things you need to know about their proprietary versions of DHTML.
Netscape introduced a <layer> tag in Navigator 4.0 for creating layers, while Microsoft implemented layers with <div>tags in Internet Explorer 4.0. As of Netscape 6, Netscape has dropped the <layer> tag because it never became a standard, so you can use <div> layers in both browsers from now on.
The key thing with DHTML is being able to access the layer objects, so that you can manipulate them. In the Internet Explorer 4.0 DOM, you can access all the layers in a document through the all property of the document. A reference to a layer looks like this:
document.all.layer_name
Thus we would access our sliding tab layer like this:
document.all.TabLayer
Once you have a reference to a layer in IE 4.0, you can access the CSS properties through the style property, just as we've been doing in all of the examples in this chapter:
document.all.TabLayer.style.left
Unfortunately, with Netscape Navigator 4.0, things aren't quite so simple. You access a Navigator 4.0 <layer> like this:
document.layer_name
So the following code would refer to our sliding tab layer:
document.TabLayer
In Navigator 4.0, the layer object defines a number of properties and methods that you can use to manipulate the layer. The properties largely correspond to the CSS property names, but you access them directly through the layer object; there is no style property:
document.TabLayer.left
Obviously, this discussion barely scratches the surface of the complexity of developing DHTML for the 4.0 browsers. If you want to learn more, see Danny Goodman's book, Dynamic HTML: The Definitive Reference (O'Reilly).
|  | |
| 29.5. DHTML Examples |  | 29.7. DHTML Tools |
Copyright © 2002 O'Reilly & Associates. All rights reserved.