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

by Budi Kurniawan
06/22/2001

Editor's Note: When we published part one of this two-part series on cross-browser layers, a couple readers posted Talk Back messages questioning the timelines of content that discusses how to use layers for older browsers -- especially because Netscape 6 and Internet Explorer 5 now support layers in accordance with the new W3C standards. In essence, the author responded by saying that it's too early to stop supporting the older browsers.

As a result of this discussion, I asked the author to make some adjustments to the second part in the series before publishing. The following text includes those changes. In a sense, I think the dialogue from the previous article represents the larger discussion about coping with evolving standards.

Displaying and hiding a layer

Normally, all layers in your page are hidden by default. Only when the user does something, such as moving the mouse pointer over an image or a hyperlink, will the layer show up. If the user does something else, say move to another image, you might want to hide the first layer and display the second one. In a nutshell, layer programming is just the art of displaying and hiding layers at the right time.

As mentioned in part one of this article, you need to first detect the browser type and version. You can use the navigator.appName property to check the browser type (Netscape or Microsoft), but then in addition to the browser type, you still need to check the version. There is an easier way of doing this. In Netscape browsers that understand layers (such as Netscape Navigator 4.x), the document object contains the layers collection. On the other hand, in Internet Explorer 4 and above, the document object contains all. With this, you have the information you need.

The code in Listing 1 shows some JavaScript that can detect whether or not a browser can support layers.


Listing 1: Detecting browser layers support

<script language="JavaScript">
var NN4 = document.layers? true : false; //Netscape Navigator 4.x.
var IE4 = document.all? true : false; // IE version 4 and above.
</script>

In the code in Listing 1, the variable NN4 will only be "true" if the browser is Netscape Navigator version 4.x, and the variable IE4 will only be "true" if the browser is Internet Explorer version 4 and above. If both NN4 and IE4 are "false," you know that the user is using a browser that does not support layers. Checking the values of NN4 and IE4 allows you to force the browser to execute the appropriate code. For instance, to display a layer you will have something similar to the code in Listing 2.


Listing 2: Displaying a layer

<script language="JavaScript">
function display() {
  if (NN4) {
    // the code to display a layer in NN 4.x
  }
  else if (IE4) {
    // the code to display a layer in IE 4 and above
  }
}
</script>

The display function will later be triggered by a designated event when you have decided how you should display your layer and have the complete HTML file. The function is still safe even in a browser that does not understand layers because in that browser, the code in the two if blocks will never be executed.

Comment on this articleWe welcome your comments on this article.
Post your comments

Related Articles:

Cross-Browser Layers, Part One

Related Books:

Dynamic HTML: The Definitive Reference

HTML and XHTML: The Definitive Guide 4th Edition

JavaScript: The Definitive Guide, 3rd Edition

Cascading Style Sheets: The Definitive Guide

To control the visibility of a layer, you need to know how to refer to the layer from your script and how to change the value of the visibility property of that layer. In Netscape Navigator 4.x, a layer is accessed by its name, therefore the reference format would be as follows.

document.layerName

However, layers are also stored as arrays of the document object, so you can use array indexing and naming techniques to access that layer object:

document.layers[n]

or

document.layers[layerName]

To change the visibility property value in Netscape Navigator 4.x, you can use the following code.

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

In Internet Explorer 4 and above, the Document Object Model provides a way to transcend any hierarchical structure of nested style objects with a document property called all. A reference to document.all exposes all named objects in the document. To that reference beginning, you add the name of the object defined in the document, plus a further reference to the style property, according to the following format.

document.all.objectName.style

And to access the visibility property, use this format.

document.all.objectName.style.visibility

With this in mind, displaying a layer can be done in only one line of code in both browsers. The code in Listing 3 is working code for displaying a layer.


Listing 3: Code for displaying a layer in both Netscape and Microsoft browsers

function display() {
  if (IE4) {
    document.all[layerName].style.visibility = "visible";
  }
  else if(NN4) {
    document.layers[layerName].visibility = "show";
  }
}

To hide a layer, you need to set the visibility property value to "hidden". Like the display function, the hide function to hide layers would have two sets of code, one for Navigator and one for Internet Explorer. Listing 4 displays the code for hiding a layer.


Listing 4: Hiding a layer

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

Now that you have the function for displaying and hiding layers, you need an event handler that will trigger the display and hide functions. The event handler is just an ordinary event handler. For example, the following hyperlinks respectively display and hide the layer on the page when the user moves the mouse pointer over them.


<a href="javascript:void()" onMouseOver='display()'>Display</a>
<br />
<a href="javascript:void()" onMouseOver='hide()' >Hide</a>

Pages: 1, 2, 3

Next Pagearrow