Lab: DHTML Layer Effects

Note: This lab requires Microsoft Internet Explorer.

Step 1: Positioning

[1.1] Open the file start.htm, which you'll find within the layerLab folder within productionShare on Crow. Examine this file in both text editor and browser. You'll see that it contains five DIVs, each using a different named style. Named styles are identified in the style sheet with a hashmark (#). The five styles have already been defined. The corresponding DIVs are arranged in a long column, reflecting their order in the markup.

[1.2] Modify the relevant styles to transform the present page so it looks like this:

To specify the position of a block element you must first set its position to "absolute." The properties top and left control the position of a DIV. The z-Index property controls the order in which objects are stacked one above another. An object with z-Index 0 is on the bottom of the stack.

So to the style for the first DIV ("Eve"), add the following rules:

[1.3] To style the next DIV ("Metro"), increment the top and left values by some appropriate number (say, 15); set z-Index to 1. Continue in the same way for the other three DIVs increasing z-Index by 1, top and left by 15 each time.

[1.4] Save your work, switch to your browser, and reload the page. You should see a stack of DIVs neatly staggered as in the illustration.

Step 2: Click Effects

In the finished version of this lab, the user can click on any of the stacked DIVs and cause that DIV to appear on top of the stack. Write one or more JavaScript functions to make this work. Begin by trying to make the lowermost DIV ("Eve") come to the top.

[2.1] To cause a DIV to respond to a mouse click, there must be an onClick handler (attribute) in its initial tag. Add this handler:

Where x will be 0 in the first DIV, 1 in the second, and so forth.

The z-Index property in stylesheets is called zIndex in JavaScript--the hyphen drops out (a regrettable inconsistency)--but note that the capital "I" remains.

If you stacked your DIVs correctly, you assigned them a series of z-Index values running from 0 to 4. To make one of the DIVs fly to the top of the present stack, assign it a z-Index of 5. To cause the "Eve" DIV to come to the top, you'd use this statement:

Go ahead and write this statement into the bringForth(which) function.

[2.3] Save your work, switch to your browser, and reload. Click on the "Eve" DIV. It should pop out.

[2.4] But how to handle those other four DIVs? This is where that parameter, which, comes in. Each of the five onClick handlers passes a unique value for the parameter. Thus you can set up a series of if conditions to handle tthe five cases. Here's the first one:

[2.5] Write the other four if conditions in the bringForth(which) function. You'll need to vary the value of which each time, as well as the name of the DIV style; but the zIndex value will be 5 in each case.

[2.6] Save your work, reload in the browser, and test by clicking on each of your DIVs. Something will happen, but it won't be quite what we have in mind: the DIVs will each pop forward once, but they won't go back to their previous positions when you click on one of their neighbors.

[2.7] To solve this problem, we need to add a new function to the scripts for this page. Here it is:

function setBack()
  {
    document.all.eve.style.zIndex = 0;
    document.all.metro.style.zIndex = 1;
    document.all.sencha.style.zIndex = 2;
    document.all.strata.style.zIndex = 3;
    document.all.modernObject.style.zIndex = 4;
  }

As you can see, setBack() returns all the DIVs to their original positions. You need to invoke this function at some point within the bringForth(which) function. Can you figure out where? If you get it right, you should be able to click on any of the DIVs and pop it to the front, leaving the rest of the stack in proper alignment.

Additional: Refining the Scripts

The scripts described above reflect a "brute force" programming style: they use five distinct instructions to change five objects. This makes the scripts a little easier to explain, but it isn't the best way to write code. Here's a more efficient version of the bringForth(which) script:

  function bringForth(which)
    {
      document.all.tags("div").item(which).style.zIndex=5;
    }

This version uses the all collection in a more sophisticated way than in our original script. It refers to the tags element of the all container, and within that element to the subset of DIV tags. Then we drill further down to an item within the DIV subset--that is, to one of the five DIVs defined on this page.

This syntax will probably look unfamiliar. It comes from Microsoft's version of the Document Object Model, which was designed for VBScript, Microsoft's competitor to JavaScript. VBScript often uses parentheses where JavaScript uses square brackets. However, the syntax quirks make no difference: the Internet Explorer browser runs the code without a hitch. You'll notice that the logic is perfectly consistent with dot notation, referring to progressively smaller subsets of the compendious all collection.

In our original version, we used a second function called setBack() to re-assert the stacking hierarchy on the other four elements when we changed the position of any one element. We still need to perform this operation in the streamlined version, but we can cut the code down considerably, and so we can fold the whole mess into one function body. The work previously done by setBack() is now done by the loop at the beginning of bringForth(which). Note again the use of the tags subcollection within all.

  function bringForth(which)
    {
      for(x=0; x<5; x++)
        {
          document.all.tags("div").item(x).style.zIndex = x;
        }
      document.all.tags("div").item(which).style.zIndex=5;
    }

To see the improved scripts in operation, go to the alternative version of the demo page; view source to inspect the scripts.