Dhtml

Dynamic Positioning

Shortcuts

Overview
Part 1
Part 2
Part 3

Overview

Welcome to the next level. This tutorial teaches you about a very important aspect of DHTML -- layers. Layers can be used to position HTML content anywhere on the screen/page and these layers may be moved and overlapped.

Part 1

There are two ways of defining layers -- using Netscape's LAYER tag, and using the CSS position rule. Since the first method is not cross-browser compatable (Internet Explorer 4.0 does not support the LAYER tag), we will be using the CSS method.

To define a layer using CSS, the most common method is to insert all the HTML content for that layer in a DIV element, the give that element a local style definition using the style tag attribute. For example, the code below creates three separate layers.

<DIV id="layer1" style="position: relative; left: 30;">
<P>
This is the first layer.
</P>
</DIV>

<DIV id="layer2" style="position: absolute: top: 10; left: 180;">
<IMG SRC="layer2.gif">
</DIV>

<DIV id="layer3" style="position: absolute: top: 50%; width: 30%;">
<A href="http://members.tripod.com/~advstud/">
</DIV>

You may have already noticed that the important style in defining a layer is the position rule. It can be either "absolute" or "relative". An absolute position means that the positioning rules refer to the distance from the top, left corner of the page, whose position is "top: 0; left: 0;". A relative position means the positioning rules refer to the distance from the position that the layer's content would normally appear if it were not a layer.

Some positioning rules that can be used are top, left, bottom, right, width, height and z-index. Most of these are self-explanatory, except for z-index -- this refers to the depth position of the layer. This is useful for overlapping layers. A layer with a z-index of 5 would be shown over, or in front of a layer with a z-index of 2.

Part 2

A layer's position can be changed after the HTML page has loaded, using JavaScript. A JavaScript function may be written to move a layer from one position to another. This is essentially the basis for animation in DHTML. This will be discussed in more detail in Advanced Tutorial 4.

DHTML layers are accessed in Internet Explorer 4.0 using the document.all["layerName"] object, while the same layer is referenced in Netscape Navigator 4.0 by document.layers["layerName"]. Using the JavaScript eval() function and the global variables defined in the init() function, you can write code that works with both (the eval() function evaluates a string, then executes it).

Below is an example of a JavaScript function that moves layerName to the position (left, top).

function moveLayer(layerName, left, top)
   /*
   ** moveLayer(layerName, left, top) moves layerName to the position
   ** (left, top).
   */
   {
      eval(layerRef + '["' + layerName + '"]' + styleRef + '.top = ' + top);
      eval(layerRef + '["' + layerName + '"]' + styleRef + '.left = ' + left);
   } 

To access other attributes of the layer, you may replace ".top" and ".left" with ".bottom", ".right", ".width", ".height" and ".zIndex".

Part 3

This is the code for the Hiding Smiley example below. To demonstrate the example, move the mouse over Smiley and he will hide behind the tree. Then click the tree and Smiley will move in front of the tree again.

<SCRIPT language="JavaScript">
<!--

function hideSmiley()
   /*
   ** hideSmiley() moves smiley behind and in front of the tree.
   */
   {
      if (eval(layerRef + '["smileyLayer"].style.left == "50' + pxRef + '"')) {
         eval(layerRef + '["smileyLayer"].style.left = "140' + pxRef + '"');
         eval(layerRef + '["smileyLayer"].style.zIndex = "1"');
      } else { /* eval(layerRef + '["smileyLayer"].style.left == "140' + pxRef + '"') */
         eval(layerRef + '["smileyLayer"].style.left = "50' + pxRef + '"');
         eval(layerRef + '["smileyLayer"].style.zIndex = "3"');
      }
   }

// -->
</SCRIPT>

<DIV id="treeLayer" style="position: relative; top: 10; left: 60; 
   z-index: 2; width: 200;" onClick=hideSmiley()>
<IMG src="../images/tree.gif">
</DIV>

<DIV id="smileyLayer" style="position: relative; top: -110; left: 50; 
   z-index: 3; width: 100;" onMouseOver=hideSmiley()>
<IMG src="../images/smiley.gif">
</DIV>

Previous Tutorial
Go back
Next Tutorial