18.4 DHTML in Fourth-Generation Browsers
Internet Explorer 4 and Netscape 4 were the browsers that introduced DHTML technology to the Internet. Both browsers include partial support for the CSS1 standard and support the CSS positioning attributes (which were integrated into the CSS2 standard) that are critical to DHTML. Unfortunately, the DOM standard did not exist when these fourth-generation browsers were being developed, so they do not conform to that standard. Nevertheless, it is possible to achieve DHTML effects in both browsers.
18.4.1 DHTML in Internet Explorer 4
As we saw in Chapter 17, IE 4 does not support the document.getElementById( ) method, nor does it support an API for dynamically creating new nodes and inserting them into a document. Instead, it provides the document.all array as a way of locating arbitrary elements of the document and allows document content to be altered with the innerHTML property of document elements. IE 4 does not conform to the standards here, but it provides adequate alternatives.
Although traversing and modifying documents is an important part of DHTML, the focus of this chapter is on the dynamic use of CSS styles. The good news is that the DOM API described earlier for setting CSS style attributes through the style property was adopted from the IE 4 API. Thus, once you've used document.all to locate the document element you want to modify, you can script the styles of that element just as you would in a browser that fully supports the DOM API. (Remember, though, that IE 4 does not fully support CSS, so you should not expect all style properties to be scriptable.)
The CSS2 standard specifies that the position attribute can be used to specify absolute or relative positioning for any element in a document. IE 4 was implemented before CSS2 was complete, however, and it supports absolute positioning for only a certain subset of elements. Therefore, when using absolute positioning in IE 4, you should wrap the content you want to position or animate in <div> or <span> tags, which do honor the CSS position attribute.
18.4.2 DHTML in Netscape 4
Each independently positioned layer in a document is represented by a Layer object, and, not surprisingly, the layers array of the Document object contains the complete set of Layer objects in a document. (Layer objects appear in this array in the order in which they appear in the document.) Additionally, any layer that is given a name with the name or id attribute can be accessed by name. For example, if a layer specifies id="L2", you can refer to it in Netscape as document.L2 or as document.layers["L2"]. Although Netscape 4 does not provide a way to refer to arbitrary document elements, this layers array provides a way to refer to the most important dynamic elements.
A layer is something like a separate window or frame. Although the Layer object is not the same as the Window object, it does have a document property, just as windows and frames do. The document property of a Layer object refers to a Document object: each layer has its own totally independent HTML document. Layers can even be nested; we can output some HTML text into a nested layer with code like this:
document.layers.document.layers.document.write("Layers Are Fun!"); document.layers.document.layers.document.close( );
Netscape 4 does not allow us to create or manipulate the nodes of the document tree, and it does not even support the innerHTML property of Internet Explorer. However, the fact that layers contain independent documents does provide a technique for dynamically modifying document content.
Although Netscape 4 defines a layer as an element with the CSS position style set, it does not define any way to script the styles of a layer element directly. Instead, the Layer object defines properties and methods that we can use to dynamically position layers.
The properties of the Layer object have names that are similar to important CSS style attributes, but these layer properties are not exactly the same as style properties. For example, the left and top properties of the Layer object specify the pixel position of the layer; setting these properties of a layer is like setting the left and top style properties of an element, except that the Layer properties expect numeric pixel values instead of strings that include a numeric value and a unit specification. The visibility property of a layer specifies whether the contents of the layer should be visible; it is a lot like the style property with the same name, except that it expects a value of show or hide instead of the CSS standard visible or hidden. The Layer object also supports a zIndex property that works just like the zIndex style property. Table 18-3 lists key CSS style properties and the Layer property that is most closely equivalent to each. Note that these are the only style properties that Netscape 4 allows to be scripted.
As you can see from Table 18-3, the Layer object supports a couple of useful properties that are not related to dynamic positioning. The background.src property specifies a background image for the layer, and the bgColor property specifies a background color for the layer. These properties correspond to the backgroundImage and backgroundColor style properties.
In addition to its properties, the Layer object offers a number of convenient methods. moveBy( ) and moveTo( ) move a layer by a relative amount or to an absolute position. moveAbove( ) and moveBelow( ) set the zIndex of a layer relative to that of some other layer. See the client-side reference section of this book for a complete list of Layer properties and methods.
We've seen that Netscape 4 automatically creates a Layer object for any element that has its position style property set to absolute. The Netscape 4 API also allows layers to be created in other, less standards-compliant ways. For example, Netscape 4 defines an HTML <layer> tag that allows layers to be defined directly in HTML. <layer> remains a proprietary Netscape 4 extension; it was not included in the HTML 4 standard and is not supported in Mozilla or Netscape 6. More importantly, though, Netscape 4 supports a Layer( ) constructor that allows Layer objects to be dynamically created, as needed within a program. See the client-side reference section of this book for details.
18.4.3 Example: A Cross-Platform DHTML Animation
Despite the differences between the DOM API, the IE 4 API, and the Netscape Layer API, it is still possible to create DHTML effects that work in DOM-compliant browsers, in pre-DOM versions of IE, and in Netscape 4. Example 18-6 shows one way it can be done. This script displays the word "Hello" and animates it in a straight line from one point in the browser window to another.
Note the compatibility technique used in this example: we test for the existence of key functions, arrays, and properties before using them. If the Document object has a property named getElementById, we assume that we have a DOM-compliant browser with that property referring to the getElementById( ) method. Similarly, if the Document object has a property named all, we assume that we're running in Internet Explorer and use the document.all array to locate the element to be animated.