• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Adding Dynamic Positioning to... > Changing Attribute Values via Script...

4.3. Changing Attribute Values via Scripting

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.

4.3.1. Referencing Positionable Objects

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.

4.3.1.1. Navigator 4 references

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.

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.

4.3.1.2. Internet Explorer 4 references

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"
							
							

4.3.2. Positionable Element Properties

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
NN Layer Property Notes IE Style Property

											
left

The offset in pixels from the left edge of the current positioning context. The IE 4 style object has a left property, but the value is a string with the unit of measure (e.g., "20px"). So, to manipulate the value of the left property in IE 4, you should use the pixelLeft property.
pixelLeft


											
top

The offset in pixels from the top edge of the current positioning context. The same situation applies here as with the left versus pixelLeft property in IE 4.
pixelTop


clip.height

The height (in pixels) of the displayed content, including overflow.
-


clip.width

The width (in pixels) of the displayed content, including overflow.
-

-

The width (in current units) of the element, as directed by the CSS width attribute.

posWidth

-

The height (in current units) of the element, as directed by the CSS height attribute.

posHeight


											
visibility

The layer object returns one of "show", "hide", or "inherit"; the style object returns one of the CSS-P standard values of "visible", "hidden", or "inherit". But the layer object property can be set to the standard property values without complaint.
visibility


zIndex

The stacking order of the element. There is complete agreement between the two browsers with regard to this property.
zIndex


background

The URL of a background image.
background


bgColor

The background color of the element. Although the browsers use different property names, they use the same color values, including Netscape plain-language names.

backgroundColor


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.

4.3.3. Layer Object Methods

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:

  • load("filename", y)

  • moveAbove(layerObj)

  • moveBelow(layerObj)

  • moveBy(deltaX, deltaY)

  • moveTo(x, y)

  • moveToAbsolute(x, y)

  • resizeBy(deltaX, deltaY)

  • resizeTo(width, height)

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.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint