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

Using layers as sub-menus

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).


Listing 7: Using layers as sub-menus

<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>


Figure 3 shows the code in Listing 7 when loaded in a browser.

The code as seen in a browser.
Figure 3: Displaying a layer as a submenu.

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.

Budi Kurniawan is a senior J2EE architect and author.


Return to the JavaScript and CSS DevCenter.