Inside Technique : Layering Pages
By Scott Isaacs

With CSS positioning and script you can create cross-browser transparent DIV's whose contents come from an external file. These transparent containers run in both Netscape Navigator 4.0 and Internet Explorer 4.0.

By creating a single page with areas that dynamically change, you can create a rich user experience. The traditional navigation model of visibly returning to the server can be improved. Instead, your web-site's navigation can be made more seamless and integrated. With your 4.0 browser, you can view a demonstration of layering pages.

Creating the DIV's

Layering pages requires you to absolutely positioned DIV's with supply them with a unique IDs. In the demonstration, we created two DIV's that were positioned on top of each other:

  <DIV ID=d1 
       STYLE="position: absolute; 
              left: 50; 
              width: 580">
  </DIV>
  <DIV ID=d2 
       STYLE="position: absolute; 
              left: 50; 
              width: 580">
  </DIV>

By omitting a top position, the DIVs top positions are automatically calculated based on the element's position in the document. You can force a specific top location and constrain the height by adding the top and height CSS properties to the style definition.

Loading a Document

The DIV's start without any contents. To load a document from the server into the DIV, we created a function updateContents(). This function takes two string arguments, the ID for the document, and the URL of the document. For example, to load the URL, info1.htm, into the DIV, D1, the function is called as follows:

  updateContents("D1","info1.htm")

We also expose a higher level update() method that takes the same two arguments. If the URL is specified as "none" the contents of the DIV are cleared. We use this function in our example to support the none selection from the list box. For example:

  update("D1","none")

Either of the above two methods can be used for updating the contents of a positioned DIV. On the next page we review the code.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.