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:
