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.
Layers 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?
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.
<div> tag can have the following attributes:
style attributes are
of importance in creating the layer effect.
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
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)
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">
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>
Your layer does not need a
<body> tag because a layer is
always in the
<div> tag could
appear at the top of the page, right after the
or near the end of the file before the closing
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
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.
Copyright © 2009 O'Reilly Media, Inc.