Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Cross-Browser Layers: Part 2
Pages: 1, 2, 3

Hiding layers from old browsers

As mentioned above, browsers before version 4 of Netscape Navigator and Internet Explorer don't understand the <div> tag, so any <div> tag in the page will be ignored. However, it does not mean older browsers will ignore what lies between the <div> and </div> tags. Consider a layer that you create as a page division, like the following.



<div id="MyLayer" style="LEFT:0px; POSITION:absolute; TOP:0px; VISIBILITY:hidden; Z-INDEX:0">
<form method="POST" action="verify.asp">
<input type=text name="userName">
<br /><input type=text name="password">
<br /><input type=submit>
</div>

An older browser will ignore the <div> tags, but will still display the form. This is of course an unexpected result. A way to get around this is to generate the layer on the fly for <div>-aware browsers. The code is given in Listing 5.


Listing 5: Hiding layers from old browsers

<div id="layer1" style="left:0px; position:absolute; top:0px; visibility:hidden; z-index:0">

<script language="JavaScript">
  if (NN4 || IE4) {
    document.write("<table border=\"1\" bgcolor=\"white\" cellspacing=\"0\" cellpadding=\"0\">");
    document.write("<tr><td>");
    document.write("<table>");
    document.write("<tr><td><a href=\"Product.html\">Product</a></td></tr>");
    document.write("<tr><td><a href=\"Search.html\">Search</a></td></tr>");
    document.write("<tr><td><a href=\"Order.html\">Order</a></td></tr>");
    document.write("<tr><td><a href=\"Help.html\">Help</a></td></tr>");
    document.write("</table>");
    document.write("</td></tr>");
    document.write("</table>");
  }
</script>
</div>


Yes, it is a tedious task to write the HTML tags in the layer with numerous document.write methods. However, this seems to be the only sure solution.

Using layers in an HTML page

After you have learned how layers can be made cross-browser-compatible, it is time to present a complete HTML file that uses layers. Listing 6 shows such an example. The code shows a page containing a layer and code to control the layer visibility in browsers that are mature enough to understand <div> tags.


Listing 6: A complete example of using layers

<html>
<head>
<title>Using Layers</title>
<script language="JavaScript">
<!--
var NN4 = document.layers? true : false;
var IE4 = document.all? true : false;
var left = 140;
var top = 50;

function display() {
  if (IE4) {
    document.all['layer1'].style.pixelLeft = left;
    document.all['layer1'].style.pixelTop = top;
    document.all['layer1'].style.visibility = "visible";
  }
  else if(NN4) {
    document.layers['layer1'].left = left;
    document.layers['layer1'].top = top;
    document.layers['layer1'].visibility = "show";
  }
}

function hide() {
  if (IE4) {
    document.all['layer1'].style.visibility = "hidden";
  }
  else if(NN4) {
    document.layers['layer1'].visibility = "hidden";
  }
}
// -->
</script>
</head>
<body>
<a href="javascript:void()" onMouseOver='display()'>Display</a>
<br /><a href="javascript:void()" onMouseOver='hide()'>Hide</a>

<div id="layer1" style="left:0px; position:absolute; top:0px; visibility:hidden; z-index:0">

<script language="JavaScript">
<!--
  if (NN4 || IE4) {
    document.write("<table border=\"1\" bgcolor=\"white\" cellspacing=\"0\" " +    
      " cellpadding=\"0\">");
    document.write("<tr><td>");
    document.write("<table>");
    document.write("<tr><td><a href=\"Product.html\">Product</a></td></tr>");
    document.write("<tr><td><a href=\"Search.html\">Search</a></td></tr>");
    document.write("<tr><td><a href=\"Order.html\">Order</a></td></tr>");
    document.write("<tr><td><a href=\"Help.html\">Help</a></td></tr>");
    document.write("</table>");
    document.write("</td></tr>");
    document.write("</table>");
  }
// -->
</script>
</div>
</body>
</html>


Note that the display function in Listing 6 has been modified to include the layer position on the page.

function display() {
  if (IE4) {
    document.all['layer1'].style.pixelLeft = left;
    document.all['layer1'].style.pixelTop = top;
    document.all['layer1'].style.visibility = "visible";
  }
  else if(NN4) {
    document.layers['layer1'].left = left;
    document.layers['layer1'].top = top;
    document.layers['layer1'].visibility = "show";
  }
}

Again, the properties that control the position are different. In IE 4 and above, the properties are called pixelLeft and pixelTop; in Netscape Navigator 4.x, the properties are called left and top.

Figures 1 and 2 shows the code in Listing 6 in action. Figure 1 shows the initial page when it is first loaded. The layer is hidden.

The initial page.
Figure 1: The page when the layer is hidden.

When you move the mouse pointer over the Display link, the layer will be displayed, as shown in Figure 2.

The page when the mouse point is moved over the display link.
Figure 2: The page when the layer is visible.

To hide the layer again, move the mouse over the Hide link.

Pages: 1, 2, 3

Next Pagearrow