Despite the similarity of the Version 4 browsers’ support for defining positionable elements, the two browsers diverge widely in how you control attribute values from a script. The primary differences can be attributed to the way each browser implements its document object model. When these browser versions were released in 1997, the DOM standardization effort was only at the earliest stages in defining the requirements for such a standard. As a result, each browser company extended its object model from its previous version along clashing philosophical lines. The level of compatibility is fairly low, but the regular nature of both object models makes it possible to raise that compatibility level to embed sophisticated DHTML capabilities for both browsers in the same document.
In comparing the document object models of the two browsers, it is clear that Internet Explorer 4 went to extremes to make virtually every HTML element a scriptable object. Navigator 4, on the other hand, restricts access to element properties by making them read-only except when being set inside JavaScript-syntax style sheet rules. The first piece of the cross-browser positioning puzzle involves referring to the positionable elements in a document.
For controlling
positionable element properties on the fly, Navigator uses its
layer object model to supply a wide range of
methods and directly settable properties for adjusting an
element’s location, size, z-index, and visibility: the family
of CSS-P attributes. Because Navigator internally turns a CSS-P
element into a layer object, you use the same
mechanism to manipulate positionable elements, whether they are
created with CSS-P or the <LAYER> tag.
Note
Netscape doesn’t like to use the term
layer object when referring to positionable
elements. The company’s official wording is “accessing
style sheet properties from JavaScript via the Document Object
Model.” This implies a Document Object Model standard, which
didn’t exist when this wording was created. Also, it’s
nearly impossible to refer to these objects in a Navigator context
without using the word “layer,” since, as you will see,
the word can become part of a reference to a positionable object.
It’s like someone introducing himself as: “Hi, my name is
Fred, but please call me Alice.” This book uses layer object
when referring to an object that uses the properties, methods, and
event handlers of Navigator’s explicitly named
layer object (see Chapter 9).
Building a reference to a layer object requires
knowledge of the containment hierarchy of the element within the
document. This is because Navigator 4 does not provide a shortcut
referencing mechanism that can dive through all nested elements of a
document and pick one out by name. Instead, the reference must
represent the containment hierarchy starting with the base
document object. Moreover, recall that a layer
always contains a document. For one layer to contain another means
that the outer layer contains a document, which, in turn, contains
the nested layer. These relationships must be reflected in a
reference to a layer object.
As an example of a one-layer-deep reference, consider the following code:
<HTML>
<BODY>
<DIV STYLE="position:absolute; left:20; top:20">
<IMG SRC="myImage.gif" HEIGHT=90 WIDTH=120>
</DIV>
</BODY>
</HTML>To access one of the position style attributes, you must build a
reference that specifies the hierarchical path to the layer in the
document. Here’s how to set the left
property to a different value:
document.layers[0].left = 50
Navigator reflects the ID attribute of a CSS-P
element as the layer’s name property. If you
assign an ID attribute to the
DIV element, you can use that name in the
reference:
document.myLayer.left = 50
To access the content of the layer object, you
must extend the reference hierarchy to include the document contained
by the layer. For example, to change the image source file in the
preceding example, the statement is:
document.layers[0].document.images[0].src = "otherImage.gif"
Once the reference reaches the document holding the content, regular
Navigator document object model references take over, as shown
earlier by the reference to the image object and
its src property.
The situation gets more complex when there are two nested levels of
positionable elements. In the following example, a
SPAN element defines a relative-positioned grid
for the absolute-positioned DIV element that
contains an image:
<HTML>
<BODY>
Here's an image
<SPAN ID="outer" STYLE="position:relative">:
<DIV ID="inner" STYLE="position:absolute; left:5; top:3">
<IMG SRC="myImage.gif" HEIGHT=90 WIDTH=120>
</DIV>
</SPAN>
</BODY>
</HTML>To change the left property of the DIV element,
the reference becomes:
document.layers[0].document.layers[0].left = 10
And to change a property of the deeply nested content, the reference gets quite long:
document.layers[0].document.layers[0].document.images[0].src = "otherImage.gif"
When scripting deeply nested items such as this, your script statements will be more manageable if you set a variable to represent an object level somewhere down the containment hierarchy. For example, if you must refer to the inner layer and its content in two or more statements, initialize a variable to represent the inner layer. Then use that variable to simplify references to specific properties or document objects:
var innerDiv = document.layers[0].document.layers[0] innerDiv.left = 10 innerDiv.document.images[0].src = "otherImage.gif"
Assigning ID attributes to elements also assists
in making long references more readable, since it is easier to
determine which objects from the document are being referenced:
document.outer.document.inner.document.images[0].src = "otherImage.gif
Even though you assign unique names to positioned and nested elements, Navigator 4’s object model has no instant way to slice through the hierarchy to reach such a nested element.
Internet Explorer 4 provides a syntax
for pinpointing any uniquely named (via the ID
attribute) element in a document (positioned or not). The keyword
that makes it possible is
all
. This keyword represents a collection of
all HTML elements in a document; it is a property of the base
document object. Another important distinction
between browser object models is that each positionable element in IE
4 does not have its own document object (except
for the IFRAME element, which defines a new
frame object within the current document).
Therefore, objects that are normally reflected as
collections (Microsoft’s way of describing
arrays of objects, such as images,
applets, and links) are
referenced directly from the base document, rather than through an
element hierarchy.
Style sheet rules, including those that affect positioning
attributes, are accessible through a style
property of an element. So, while an element may have some of its own
properties that are accessible directly (such as the
innerHTML property), in order to read or modify
one of the style sheet rules associated with the element, you must
include a reference to the style property.
To demonstrate how references work in IE 4, consider the following
simple document with a DIV element nested inside
and a SPAN element:
<HTML>
<BODY>
Here's an image
<SPAN ID="outer" STYLE="position:relative">:
<DIV ID="inner" STYLE="position:absolute; left:5; top:3">
<IMG SRC="myImage.gif" HEIGHT=90 WIDTH=120>
</DIV>
</SPAN>
</BODY>
</HTML>References to the three items influenced by positioning are as follows:
document.all.outer document.all.inner document.images[0]
If you want to access one of the style sheet properties, the
reference gets a little longer, to include the
style property of the positioned element:
document.all.inner.style.pixelLeft = 10
And yet, to change a property of even the deeply nested
image object, the reference is a simple one:
document.images[0].src = "otherImage.gif"
The next piece of the cross-browser positioning puzzle involves the
actual property names. Table 4.3 shows the primary
properties that control a positionable element’s location,
size, visibility, z-order, and background (many of which mirror CSS-P
attributes). For Navigator 4, these properties belong to the
layer object; for IE 4, these properties belong to
the style object.
Table 4-3. Common Scriptable Positioning Properties
Navigator 4 generally assigns default values to positionable object
properties, even if the style rule (or
<LAYER> tag) does not specifically set the
corresponding attribute values. Internet Explorer 4 tends to leave
properties empty if the associated style attributes are not set in
the rule.
The third and final piece of the cross-browser positioning puzzle
concerns the techniques you use to alter the positionable properties.
The Internet Explorer 4 style object is heavy on
properties, but very light on methods. Aside from two generic methods
that get and set style attributes
(getAttribute()
and
set-Attribute()), there are no facilities for
directly influencing object behavior with methods. Navigator
4’s layer object, on the other hand,
provides eight methods that you can use to efficiently change the
location, size, and stacking order of an element.
The
layer.moveBy()
method demonstrates just how
efficient these methods are. The method takes two parameters that
specify the number of pixels to move an element along the X and Y
axes. Positive values indicate movement to the right and downward;
negative values direct movement to the left and upward. Thus, to
repeatedly move an object diagonally to the right and down, in 5
incremental steps of 10 pixels each, you can use the following
for loop in JavaScript:
for (var i = 0; i < 5; i++) {
document.layers[0].moveBy(10, 10)
}Doing this same action with an Internet Explorer 4 positionable element requires adjusting each property that controls the pixel location of the element:
for (var i = 0; i < 5; i++) {
document.all.elementName.style.pixelLeft += 10
document.all.elementName.style.pixelTop += 10
}Despite what might appear to be stair-stepped action in IE 4, the browser buffers the changes so that the animation appears in the straight line intended by the author.
The full set of Netscape layer methods consists of the following items:
Not every method has a scriptable property equivalent in IE 4 because the object and rendering models vary in some key places, such as specifying the viewable size of a positionable element. Mastering one platform’s way of scripting positionable elements may mean having to “unlearn” or ignore items that don’t have a cross-platform equivalent.
Get Dynamic HTML: The Definitive Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
