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.
|
When you move the mouse pointer over the Display link, the layer will be displayed, as shown in Figure 2.
|
To hide the layer again, move the mouse over the Hide link.
