Cross-Browser Layers: Part 2

You probably have more than one layer in your page. For instance, if you use layers to display sub-menus for each menu item, you would have a different layer for each menu item. Four menu items mean four different layers. Predictably, your JavaScript code would also be more complex. Normally, there is only one layer visible at a time, so you need to hide the other layers before displaying a layer.

The easiest way is to hide all layers in the hide function prior to displaying any layer. Each event handler for displaying a layer will then have to invoke two functions, the hide function to hide all layers and the display function to display the corresponding layer. Listing 7 gives you the code for an online computer magazine that provides four topics: HTML, JavaScript, Java, and ASP. Each topic has four articles. To read an article, you need to click the corresponding link, or you can choose the article directly from the layer that appears.

Unlike the code in Listing 6 where the layer position is fixed, the code in Listing 7 displays a layer at the position relative to the mouse when the mouse pointer is over a hyperlink. To know the position of the mouse, you need to capture the MOUSEMOVE event using the following statements.

if (NN4) 

  document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = setMouseCoordinate;

And then, set the left and top variables with the setMouseCoordinate function (see Listing 7).

<html>

<head>

<title>Using Layers as Sub-menus</title>

<script language="JavaScript">

<!--

var NN4 = document.layers? true : false;

var IE4 = document.all? true : false;

var left;

var top;



function display(layerName) {

  if (IE4) {

    document.all[layerName].style.pixelLeft = left + 25;

    document.all[layerName].style.pixelTop = top;

    document.all[layerName].style.visibility = "visible";

  }

  else if(NN4) {

    document.layers[layerName].left = left + 25;

    document.layers[layerName].top = top;

    document.layers[layerName].visibility = "show";

  }

}



function hide() {

  if (IE4) {

    document.all['layer1'].style.visibility = "hidden";

    document.all['layer2'].style.visibility = "hidden";

    document.all['layer3'].style.visibility = "hidden";

    document.all['layer4'].style.visibility = "hidden";

  }

  else if(NN4) {

    document.layers['layer1'].visibility = "hidden";

    document.layers['layer2'].visibility = "hidden";

    document.layers['layer3'].visibility = "hidden";

    document.layers['layer4'].visibility = "hidden";

  }

}



function setMouseCoordinate(e) {

  if (NN4) {

    left = e.pageX; 

    top = e.pageY;

  }

  else if (IE4) {

    left = document.body.scrollLeft + event.clientX

    top = document.body.scrollTop + event.clientY

  }

}



if (NN4) 

  document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = setMouseCoordinate;



// -->

</script>

</head>

<body>

<a href="HTML.html" onMouseOver='hide(); display("layer1")'>HTML</a><br />

<a href="JavaScript.html" onMouseOver='hide(); display("layer2")'>JavaScript</a><br />

<a href="Java.html" onMouseOver='hide(); display("layer3")'>Java</a><br />

<a href="ASP.html" onMouseOver='hide(); display("layer4")'>ASP</a><br />



<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=\"HTML/intro.html\">Introduction To HTML</a></td></tr>");

    document.write("<tr><td><a href=\"HTML/advtags.html\">Advanced Tags</a></td></tr>");

    document.write("<tr><td><a href=\"HTML/CSS.html\">CSS Overview</a></td></tr>");

    document.write("<tr><td><a href=\"HTML/DHTML.html\">Dynamic HTML</a></td></tr>");

    document.write("</table>");

    document.write("</td></tr>");

    document.write("</table>");

  }

// -->

</script>

</div>



<div id="layer2" 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=\"JS/intro.html\">Introduction To JavaScript</a></td></tr>");

    document.write("<tr><td><a href=\"JS/array.html\">Arrays</a></td></tr>");

    document.write("<tr><td><a href=\"JS/JSSpec.html\">Specifications</a></td></tr>");

    document.write("<tr><td><a href=\"JS/advJS.html\">Advanced JavaScript</a></td></tr>");

    document.write("</table>");

    document.write("</td></tr>");

    document.write("</table>");

  }

// -->

</script>

</div>



<div id="layer3" 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=\"Java/intro.html\">Introduction To Java</a></td></tr>");

    document.write("<tr><td><a href=\"Java/applet.html\">Writing Applets</a></td></tr>");

    document.write("<tr><td><a href=\"Java/JSP.html\">Introduction to JSP</a></td></tr>");

    document.write("<tr><td><a href=\"Java/EJB.html\">Programming EJB</a></td></tr>");

    document.write("</table>");

    document.write("</td></tr>");

    document.write("</table>");

  }

// -->

</script>

</div>



<div id="layer4" 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=\"ASP/intro.html\">Introduction To ASP</a></td></tr>");

    document.write("<tr><td><a href=\"ASP/session.html\">The Session Object</a></td></tr>");

    document.write("<tr><td><a href=\"ASP/FileUpload.html\">File Upload</a></td></tr>");

    document.write("<tr><td><a href=\"ASP/asa.html\">The Global.asa file</a></td></tr>");

    document.write("</table>");

    document.write("</td></tr>");

    document.write("</table>");

  }

// -->

</script>

</div>



</body>

</html>

Summary

In this article you have seen how to write cross-browser layers. You have also learned how the <div> tag plays an important role in the layering technology. The pieces of code in this article show how to use layers for creating sub-menus.

Comments on this article

Showing messages 1 through 13 of 13.

hi
2006-11-25 17:43:24 maheshchari [View]

it is so good giving example according to the browser.........thanks......alot

final example
2003-05-28 22:39:53 anonymous2 [View]

umm maybe its just me.
Tested the final example on Netscape 7.2 (win nt5.0- just in case the platform somehow makes a difference). And the layers didnt appear. Worked on IE though.

Arcane Knowledge
2003-04-13 12:53:44 anonymous2 [View]

Pretty much a waste of time. No real need to ever code for non-W3C browsers. If the user cannot maintain a FREE browser within two major revisions of the latest version, then they are likely too technologically illiterate to be able to navigate and interact with any site -- even one written for their crappy non-standards-compliant antique browser.

Time to pull this article and replace it with a relevant tutorial.

Arcane Knowledge
2003-04-29 12:12:51 anonymous2 [View]

You've obviously never worked in the real world. Enough said.

Alternative hidding for old browser
2001-11-21 13:01:50 darknerd [View]

In order to do the support older browers, one must do a lot of document.write commands as suggestion in the article. This seems ugly, but there is nothing much that can be done :-\

I found though that when hidding content, it content takes up a lot of space even though it is invisible. This includes , especially for images as well.

So, I have an alternative idea.

For hiding images, use a default image of a 1px by 1px transparent gif. Then as apart of the show function replace the image.src with a full gif.

For hiding text in the document, one could make the font color equal to background. The font color could then be change to the appropriate color, e.g. document.all[myObj].style.color = "black", document.layer[myObj].color = black, and I think... document.getElementById("myObj").color = black.

In this manner, document.write()s are not needed as the content will be hidden in older browers using the above suggestion anyhow...

Where's the ID?
2001-11-18 14:36:17 darknerd [View]

I don't mind learning about supporting Microsoft's ALL DOM or even "wish we could forget existed" NS4 Layer DOM. However I wish there was coverage of W3C DOM. After all, aren't we supposed to support standards to avoid all this chaos and pandemonium of the past? The example source should speak for itself, having to do multiple forks and such. I hope there can be a re-write of this article to include the W3C ID DOM. By excluding this coverage, I feel that it is rather backwards. Also, many browsers like Mozilla, Opera, Konquerer, and Netscape 6 are excluded from utilizing the ideas in this article.

Part 3 ?
2001-10-05 05:26:58 zander [View]

A great help, and the W3C extensions posted here seem to work fine too.

Perhaps a part3 might be on the cards? Maybe adding the ability to change the cell-background colors. This seems to be a cross-browser issue and how do people make the wholl cell clickable rather than just the text?

Huh?
2001-08-16 15:19:30 johnq [View]

Why would you use:
onMouseOver='hide();

...with:

function hide() {
if (W3C) {
document.getElementById('layer1').style.visibility = "hidden";
document.getElementById('layer2').style.visibility = "hidden";
document.getElementById('layer3').style.visibility = "hidden";
document.getElementById('layer4').style.visibility = "hidden";
}
else if (IE4) {
document.all['layer1'].style.visibility = "hidden";
document.all['layer2'].style.visibility = "hidden";
document.all['layer3'].style.visibility = "hidden";
document.all['layer4'].style.visibility = "hidden";
}
else if(NN4) {
document.layers['layer1'].visibility = "hidden";
document.layers['layer2'].visibility = "hidden";
document.layers['layer3'].visibility = "hidden";
document.layers['layer4'].visibility = "hidden";
}
}

...ad nauseum when you could just do:

function hide(layerName) {
if (W3C) {
document.getElementById(layerName).style.visibility = "hidden";
}
else if (IE4) {
document.all[layerName].style.visibility = "hidden";
}
else if(NN4) {
document.layers[layerName].visibility = "hidden";
}
}

...and call it with:
onMouseOver='hide("layer1");

...etc.......???

That's what functions are for. :)

Huh?
2001-08-16 16:02:10 johnq [View]

Nevermind, I was thinking "tooltips" not menu! :)

STYLE / POSITION
2005-07-25 00:49:55 Dr_Fre [View]

I tried dusing the menu on a HP linux with NS4
because of the following tag no style is applied:
style='position: absolute;'
but still it is needed to position the div/menu
i tried the following but the menu can not be shown .
if(ns4){ document.write('<div id=\'menudiv\' >'); } else{ document.write('<div id=\'menudiv\' style=\'position: absolute;\'>'); }
someone also encountered this problem
or was even able to solve it???

Using layers as sub-menus

Summary