Cross-Browser Layers, Part One

You know there are no such things as cross-browser layers, because the layer object only exists in a Netscape Navigator version 4 or later browser. However, Internet Explorer is rich enough to present something of its own that resembles layers. This article discusses problems with writing code for layers in both browsers and presents you some solutions.

A layer is just another page of HTML tags. Unlike the traditional HTML page, however, a layer can be placed on top of another page and positioned exactly at the coordinate of your choice in the browser window. You can have any number of layers, and by changing the z-order of those layers, you can determine which layer will be displayed. When programming layers, these are the issues you need to address.

• Layers are possible thanks to the Dynamic HTML specifications in version 4 of Netscape Navigator and Internet Explorer. Unfortunately, as usual, Microsoft and Netscape worked faster than the standard body could produce standards for DHMTL. As a result, the resulting DHTML object models for both browsers could not be more different. In fact, when you want something to mimic a cross-browser layer, you need two sets of code, one for each browser. By detecting the type of browser, you can force a browser to run the appropriate code.

• Layers only work in Netscape Navigator version 4 and above or Internet Explorer version 4 and above. Users with older browsers should still be able to surf the layer-less version of your site comfortably. In fact, there shouldn't be any noticeable difference.

The issues in the second point disappear if you don't mind having three versions of each page and you are using a processing engine such as ASP or JSP that can detect the user browser type when the HTTP request comes. But, you know, using ASP or JSP to output plain HTML is much slower because the page will be processed by the ASP engine or JSP container before being sent as an HTTP response. Moreover, having three versions of each page (one for Netscape Navigator version 4 and above, one for IE 4 and above, and one for older browsers) presents awful maintenance issues. A minor modification to the page will require you to work on three different files.

In parts one and two of this article, you'll see how to use layers to make your web site more attractive. The most popular application of layers is for creating submenus that show up when you move the mouse pointer over a menu. However, before you start with the code, you should familiarize yourself with the <div> tag, a tag that plays a critical role when you work with layers.

Creating a page division as a layer

Before you start working with layers, you should be familiar with the <div> tag. The <div>tag is used to define an area of the page, or document division. Anything between the opening and the closing tag is referred to as a single item.

Introduced in HTML 3.2 standard, the <div> tag does not allocate any particular style of structure to the text, it just allocates an area. The <div> tag is a block-level element, it can be used to group other block-level elements, but it can't be used within paragraph elements.

The <div> tag can have the following attributes: align, class, dir, id, lang, style and title. The id and style attributes are of importance in creating the layer effect.

The id attribute gives a layer a unique identifier that is useful in the programming. The style attribute controls the position, visibility, and the z-order of a page division. The properties and possible values of the style attribute are given in the table below. These properties are part of the Cascading Style Sheet -- Positioning (CSS-P), an addition to the CSS1 syntax for specifying an exact location on the page where an HTML element is to appear.

The properties and values of the style attribute:

• position -- absolute | relative
• left -- pixels relative to the left of the containing element
• top -- pixels relative to the top of the containing element
• visibility -- visible | hidden | inherit
• z-index -- layer position in stack (integer)

The visibility property is the most important for cross-browser layer control because with it you can show and hide a layer. In Netscape Navigator 4 and above, the visibility value has a different value for visible: show. To create a layer, just write normal HTML tags and put them inside the <div>tags using special attributes.

<div id="MyLayer" style="LEFT:0px; position:absolute; TOP:0px; visibility:hidden; z-index:0">
</div>

For example, Listing 1 shows the code for a layer, where there is a form with two input elements.

Listing 1: An example of a layer

<div id="layer1" 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>

Your layer does not need a <body> tag because a layer is always in the <body>. The <div> tag could appear at the top of the page, right after the <body> tag, or near the end of the file before the closing </body> tag. You can have as many layers as you want, as long as they all have unique IDs. In each tag, you can put anything legal for HTML body, even though you probably want to use a table for alignment and other graphical effects.

Browsers prior to version 4 don't know how to render <div>. Fortunately, they are happy to accept the <div> tags without complaint. As you'll see later, this is a boon for us.

In part two next week, I'll show you how to display and hide these layers. Until then, happy scripting!

Budi Kurniawan is a senior J2EE architect and author.

Return to the JavaScript and CSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.