Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples


Cross-Browser Layers, Part One

by Budi Kurniawan
05/25/2001

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.

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.

Comment on this articleLayers were considered a very hot innovation a couple years ago when they first began to surface. Do you think they're here to stay, or will they eventually be replaced by another technology?
Post your comments

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

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:

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.