by Gary Lee
I did not like layers. I hated how various sites used it to clutter my screen with crap. Then I came across Netscape's Expanding Colored Squares Example. I was transfixed by the expanding and contracting squares until, hours later, I realized I needed a life.
June 18, 1998
These moving layers belong to the "Dynamic HTML" family. After extensive research, I learned that Dynamic HTML is defined as "useless little gimmicks added to Web pages by yourself, or at extreme cost, by someone else." Let's take a quick look at layers and how to irritate people with them. First, you will need Netscape Navigator 4.0. MS Internet Explorer 4.0 also has support for this gimmick, but I'll disregard it for this article because
- I've run out of disk space to install IE4,
- Dissin' MS is cool (as the young delinquent losers in suburban malls say),
- It might lead to a second article which will be a copy of this, except for "IE4" replacing "NS4" everywhere, allowing me more time to sit in my rocking chair on the front porch complaining about young delinquent losers.
The first thing to do is define a layer. One way to go about this is to use Style Sheets, like this:
<STYLE TYPE="text/css">
<!--
#layer1 {
position:absolute;
top:50px;left:50px;
}
-->
</STYLE>
A position property with the values absolute or relative defines a layer. If this is in the HEAD of your Web page, then somewhere in the BODY you can put:
<DIV ID=layer1>
This is a layer
</DIV>
If you have an old browser, the text will show up wherever you have placed it in the HTML. However, with a newer browser, the layer1 style you defined earlier will cause it to appear according to the top and left values. This can be used to create nice effects with overlapping text on newer browsers that is a totally unreadable mess on other browsers, or just plain ugly on all browsers.
One thing you might like to do to alleviate the problem is to somehow make the text visible only on capable browsers. You could do this by creating an "empty" layer:
<DIV ID=layer1>
</DIV>
Then, you could use JavaScript to write text into the layer. This way, if the browser does not support layers or JavaScript, nothing will show up. Assuming we have the layer1 style defined and an "empty" layer, we can add the following JavaScript function:
<SCRIPT LANGUAGE="JavaScript">
function layerWriteStuff() {
if (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4) {
document.layer1.document.write("Hi, this is a layer.<BR>");
document.layer1.document.write("Irritating, eh?<BR>");
document.layer1.document.write("<STRONG>Eat at Joe's</STRONG>");
document.layer1.document.close();
document.layer1.bgColor = "#FFDDDD";
}
}
</SCRIPT>
If your brain hasn't fallen asleep, you might see how the layer is referred to as document.LayerName. The function uses .document.write() to add text to the layer. Don't forget to close() the layer after you finish writing. You can also see a little extra gimmick...a layer background colour. If bgColor is null, then the background is transparent. Lastly, you can see how we use navigator.appName and navigator.appVersion to check if the browser is capable of displaying this layer. If it isn't, we don't write anything, thereby avoiding the problem of messing up the page on an older browser.
With this function, all that is needed is to execute it when the Web page is loaded. All you need is a BODY tag that looks like:
<BODY onLoad="layerWriteStuff();">
The ability to precisely place text might be fun, but what's even more fun is moving it around.
function moveTheLayer() {
if (document.layer1.left < 400) {
document.layer1.moveBy(10,1);
setTimeout(moveTheLayer,100);
}
return false;
}
In this function, we use moveBy(x,y) to move document.layer1 horizontally by x and vertically by y. Then we use setTimeout() to run the function again after 100 milliseconds. The net result is a layer, and its contents, moving across the screen. We use the left property to check the position of the layer and stop the movement when it is far enough to the right.
If you look at the source for this page, you will see all this implemented and in action. It's not rocket science, and it barely scratches the surface, but it is a first step to a greater consciousness of the possibilities and a realization that I have to meet a word quota. To learn more funky things to do with layers, try the Dynamic HTML in Netscape Communicator page. But the basics to start are:
- define a layer (e.g. by using a style),
- create a layer (perhaps with
<DIV ID=LayerName>),
- use JavaScript to funkify the layer.
Related Links:
| 
