Monday, November 12, 2007
Rolling Out the Yellow Carpet
Blog Entry #94
In conjunction with the release in 1997 of the Navigator 4 browser, Netscape introduced a proprietary HTML layer element for specifying a block of positioned content. Netscape correspondingly implemented in JavaScript 1.2 a client-side layer object. Netscape fleshed out the layer element/object in a "Dynamic HTML in Netscape Communicator" resource, which you won't find at the Mozilla Development Center but which a helpful Russian site has archived here.
(July 2016 Update: That helpful Russian site isn't around anymore - go get the resource at the Internet Archive.)
The layer element is somewhat of a cross between the div element and the iframe element. A layer element/object:
(a) can be (indeed, is meant to be) positioned absolutely on the page;
(b) can be moved dynamically, and even
(c) stacked along a "z-axis" perpendicular to the page;
(d) can be resized à la the window object;
(e) can be "clipped", i.e., displayed/hidden in whole or in part;
(f) can be given background colors and backgrounds à la the body element; and
(g) can load an external file via a src attribute.
Notwithstanding its versatility, however, the layer element/object is only supported by Netscape 4.x; it wasn't picked up by the W3C or by Microsoft, and from Netscape 6 onwards was dropped by Netscape/Mozilla itself, which evidently regarded it to be redundant vis-à-vis other HTML elements and CSS (in particular, the positioning capabilities and visual effects of CSS level 2).
HTML Goodies' JavaScript Script Tips #76, #77, and #78 cover a script that uses a layer, named click, to gradually roll out and roll up a tabular menu of links. In today's entry, we'll discuss the Script Tips #76-78 Script's click layer and how the script's script element acts on it (or would act on it, if the layer element/object had cross-browser support). In the following entry, we'll revamp the script and make it work with current browsers.
The Script Tips #76-78 Script can be accessed by following the Here's the Code links in all three script tips and is reproduced in the div below:
<html>
<head>
<script language="javascript">
<!--
/* Script by Tom Richardson Jr.
Permission to use this script as long as this part stays intact
Visit my website at http://home.rmci.net/gooftroop
You can change the speed of the selection to come down by changing the
x variable to be less than a greater number or you can make it go
slower by changing the x variable to be less than a smaller number. */
function showmenu( ) {
startx = document.layers["click"].clip.bottom;
for (j = 0; j < 70; j++) {
document.layers["click"].clip.bottom = startx + j;
for (x = 0; x < 120; x++) {
void(0);
} } }
function unshow( ) {
startx = document.layers["click"].clip.bottom;
for (j = 0; j < 70; j++) {
document.layers["click"].clip.bottom = startx - j;
for (x = 0; x < 120; x++) {
void(0);
} } }
// -->
</script>
</head>
<body bgcolor="#ffffff">
<layer bgcolor="yellow" name="click" left="200" top="25" clip="250,25"
onmouseover="showmenu( ); return false;" onmouseout="unshow( ); return false;">
<font face="arial black" color="black">HTML Goodies Categories</font>
<br>
<table border="0" cellspacing="10">
<tr>
<td><font size="-1"><a href="http://www.htmlgoodies.com/stips">Script Tips</a></font></td>
<td><font size="-1"><a href="http://www.htmlgoodies.com/new.html">New Page</a></font></td>
<td><font size="-1"><a href="http://www.htmlgoodies.com/beyond">Beyond HTML</a></font></td>
</tr>
<tr>
<td><font size="-1"><a href="http://www.htmlgoodies.com/tutors">Tutorials</a></font></td>
<td><font size="-1"><a href="http://www.htmlgoodies.com/letters">Newsletters</a></font></td>
<td><font size="-1"><a href="http://www.htmlgoodies.com/tutors/master.html">Master List</a></font></td>
</tr>
</table>
</layer>
</body>
</html>The click layer
The Script Tips #76-78 Script document's body element has one child: a layer element whose start-tag is:
<layer bgcolor="yellow" name="click" left="200" top="25" clip="250,25"
onmouseover="showmenu( ); return false;" onmouseout="unshow( ); return false;">
Let's run through the layer element attributes in order.
(1) Like the body, table, tr, td, and th elements, the layer element has a bgcolor attribute that (when present) gives it a solid background color, yellow in this case.
(2) The layer is given a name="click" attribute identifier, but Netscape would have preferred that we use an id attribute for this purpose:
The id attribute was previously called name. The name attribute still works, but its use is discouraged, since it is only applicable to the <layer> tag [and not to the <ilayer> tag].
A name/id attribute is unnecessary here, however; in the script's script element, the click layer can be referenced via a document.layers[0] expression.
(3-4) The left and top attributes position the left and top edges of the click layer relative to the left and top edges of the document content area: left="200" pushes click's left edge 200 pixels to the right of the document's left edge, whereas top="25" pushes click's top edge 25 pixels below the top of the document. I find that left and top are %Length; attributes, i.e., the left/top value can be a pixel integer or a percentage.
(5) Regarding the clip attribute, in Script Tip #76 Joe says:
Now we get into shaping the layer when it first appears. The attribute "CLIP" is set to two numbers. The first number [250] refers to the width and the second [25] to the height.Not a bad start, but there's more to it than this. The clip attribute "clips" a layer (sort of like clipping a newspaper article) by defining a rectangle that surrounds a visible subset of the layer relative to the actual edges of the layer; the rest of the layer outside the rectangle is not visible. A clip="250,25" attribute is shorthand for clip="0,0,250,25", whose four number values have the following meanings:
• The first 0: the left edge of the layer's visible region is 0 pixels to the right of the layer's left edge (the two edges coincide).
• The second 0: the top edge of the layer's visible region is 0 pixels below the layer's top edge (the two edges coincide).
• 250: the right edge of the layer's visible region is 250 pixels to the right of the layer's left edge.
• 25: the bottom edge of the layer's visible region is 25 pixels below the layer's top edge.
The visible region of a clip="a,b,c,d" layer thus has a width of c-a and a height of d-b, and it follows that the visible region of a clip="c,d" layer has a width of c and a height of d, as is the case here.
FYI: the layer element has specific width and height attributes for setting its actual width and height, respectively.
(6-7) The onmouseover and onmouseout event handlers will call the script element's showmenu( ) and unshow( ) functions, respectively. At first glance, the accompanying return false statements seem unnecessary, but I'll have more to say about them later.
The initially visible region of the click layer holds an "HTML Goodies Categories" string marked up with a (deprecated) font element. The initially invisible region of the click layer holds a two-row, six-cell table. Each table cell contains a link to an HTML Goodies sector; most of these links, which are also marked up with font elements, are broken. We'll clean up this code after we deconstruct the script, bringing us to...
Deconstructing the Script Tips #76-78 Script
Let's suppose that you're browsing with Netscape 4.x and that you follow Script Tip #76's Script's Effect link to the script demo page. Per the discussion above, you see a 'boldened'* "HTML Goodies Categories" string in a 250px-by-25px yellow rectangle (*assuming that the Arial Black font is on your computer):
HTML Goodies Categories
You move the mouse cursor over the "HTML Goodies Categories" string, triggering the script's showmenu( ) function.
function showmenu( ) {
startx = document.layers["click"].clip.bottom;
Layers are referenced as are other document 'collections' (forms, images, links, etc.): either (a) via a layers[ ] array indexed with ordinal numbers or associatively
document.layers[0] // or
document.layers["click"]
or (b) by name:
document.click
The read/write clip.bottom property of the layer object corresponds to the fourth number value of the layer element's clip attribute, i.e., clip.bottom specifies the pixel distance between a layer's actual top edge and the bottom edge of its visible region. The document.layers["click"].clip.bottom value, set at 25 in the script's HTML, is assigned to the variable startx.
for (j = 0; j < 70; j++) {
document.layers["click"].clip.bottom = startx + j;
for (x = 0; x < 120; x++) {
void(0); } } }
A pair of nested for loops expands the click visible region by shifting the clip.bottom edge 'southward'. As the counter variable j of the outer loop increments, startx+j and document.layers["click"].clip.bottom also increment; each iteration of the outer loop thus adds a 250px-by-1px 'layer' to (the bottom of) the click visible region.
The inner loop, Joe notes in Script Tip #77,
doesn't produce anything. It simply marks time until the first loop can run again,enabling the rest of the click layer to be displayed gradually and not all at once. Its void(0) operator expression is a placeholder of sorts, returning undefined,
which has no effect in JavaScript,Netscape states. (Contra the void operator entry in the JavaScript 1.5 Core Reference, void(0) does not return 0; contra Script Tip #78, the void(0) expression does not stop the loop à la the break statement.) Can the void(0) command be commented out? Consider the animation script of HTML Goodies' JavaScript Primers #28, which uses a statementless
for (x = 1; x < 800; x = x + 1) { }
loop to set a time delay. However, the syntax of the for statement shows that the statement(s) in braces is the one for parameter that isn't optional, so let's just let the void(0) line be.
And how does this all work in practice? As I have Netscape Communicator 4.79 (which you can download for free here) on my hard disk, I can report that when I adjust the inner for loop condition to x<1200, then the script works as advertised; mousing over the "HTML Goodies Categories" string smoothly rolls out the click link menu to give:
| Script Tips | New Page | Beyond HTML |
| Tutorials | Newsletters | Master List |
(The links won't take you anywhere - their href attributes have been set to empty strings.)
At this point we have a 250px-by-95px block of content. For rolling up the click link menu, moving the mouse cursor off of the click layer triggers the script's unshow( ) function, which, Joe points out in Script Tip #78, differs from the showmenu( ) function by
one keystroke; specifically, the click clip.bottom value is decremented by the outer for loop via:
document.layers["click"].clip.bottom = startx - j;
At the end of the unshow( ) function, the click layer's visible region has shrunk to the 250px-by-25px block shown earlier.
We're now ready to bring the Script Tips #76-78 Script into the modern era and we'll do that in the next post.
reptile7
- posted by A. Peak @ 2:32 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)