Dynamic Positioning

XHTML elements that have been positioned as relative or absolute can be repositioned through scripting. Repositioning involves changing the element's left and top style settings. There are four properties that can be scripted to effect this change.

CSS and DOM Reference Effects
left:n
object.style.left="n"		 Sets the left edge of the element relative to its container element; n is a string measurement unit, e.g., 100px.
top:n
object.style.top="n"		 Sets the top edge of the element relative to its container element; n is a string measurement unit, e.g., 100px.
object.style.pixelLeft=n  Sets the left edge of the element relative to its container element; n is numeric for use in calculations, e.g., 100.
object.style.pixelTop=n Sets the top edge of the element relative to its container element; n is numeric for use in calculations, e.g., 100.
Figure 13-11. Element positioning properties.

Changing Positional Settings

The left and top properties coded in a style sheet can be replaced by scripted properties to dynamically change an element's location on the page. The following image, for example, is initially positioned on the page with a style specification declaring a left location of 50 pixels relative to the container document.




Figure 13-12. Dynamically changing an element's position.

When the image is clicked, it is moved to the right by resetting the left property from 50 pixels to 300 pixels. This change takes place through an onclick event handler that dynamically changes this property setting.

<img src="jsdhtml.gif" style="position:relative; left:50px; cursor:hand"
  onclick="this.style.left='300px'"/>
Listing 13-10. Code to dynamically change an element's position.

The left and top properties are treated as string values. In the above example, the left setting is changed from "50px" to "300px" by replacing one string value with a different string value. Since left and top are string values, however, you cannot use them if you need to perform calculations to derive these positional settings.

When you need to calculate a positional setting, the pixelLeft and pixelTop properties are provided. These two properties treat positions as numbers rather than strings—as the numeric values 50 and 300 rather than the string values "50px" and "300px".

Below is an image scripted to change its left setting, this time incrementally in response to mouseover events, moving 50 pixels to the right on each mouseover until it reaches the right edge of the page.




Figure 13-13. Calculating the position of an element.
<script type="text/javascript">

function MoveImage(TheImage)
{
  if (TheImage.style.pixelLeft < 350){
    TheImage.style.pixelLeft += 50;
  }
}

</script>

<img src="jsdhtml.gif" style="position:relative; left:10px; cursor:hand"
  onmouseover="MoveImage(this)"/>
Listing 13-11. Code to calculate the position of an element.

The onmouseover event handler in the <img> tag passes a self reference to the MoveImage() function where it is received as argument TheImage. As long as the left edge of the image is less than 350 (pixels) from the left edge of the page, 50 (pixels) is added to the current setting for its left position. The pixelLeft property is used in the calculation since it represents the numeric equivalent of the left string value.

Changing Element Layers

In much the same fashion, the layer occupied by an element can be changed through scripting. Recall that positioned elements take on z-index style values relative to other positioned elements on the page. The DOM zIndex property can be used to script changes to this layering.

CSS and DOM Reference Effects
z-index:n
object.style.zIndex=n		 Sets the layer of the element relative to the text layer (0); n is an integer (positive or negative) with higher values on top of lower values.
Figure 13-14. Element layering styles.

The following positioned images are overlayed, with the "XHTML" image appearing on top of the "JScript/DHTML" image by virtue of the fact that it's tag appears last in coded sequence. Whenever an image is clicked, it is brought to the front layer.




Figure 13-15. Changing element layering.
<div style="position:relative; height:75">
  <img id="JSDHTML" src="jsdhtml.gif" style="position:absolute;
    left:10; top:10"
    onclick="this.style.zIndex=2; 
             document.getElementById('XHTML').style.zIndex=1"/>
  <img id="XHTML" src="xhtml.gif" style="position:absolute;
    left:40; top:30"
    onclick="this.style.zIndex=2; 
             document.getElementById('JSDHTML').style.zIndex=1"/>
</div>
Listing 13-12. Code to change element layering.

Notice that the two images are contained inside a division that is positioned relative so that their positioning can be absolute as measured from the top-left corner of the division. The division can be moved anywhere on the page while the images retain their positions relative to each other. The enclosing division does not have borders or shading so it remains invisible while performing its function as a coordinate system for image positioning.

An image's layer is changed by changing its zIndex property. An image is brought to the front by setting it's zIndex property to 2 while resetting the other image's property to 1. Recall that the absolute magnitude of the zIndex property does not matter. The element with a larger zIndex setting appears on top of an element with a lower setting.

The above examples of dynamic positioning show responses to mouse events. In upcoming tutorials you'll learn how to position page elements through other page and user events, and learn how to perform animations by utilizing window timers to automate position changes.