Hare Today, Gone Tomorrow

One of my passions is Javascript. I am a programmer at heart. My father before me. We always had a computer at the house when I was a kid and I picked up a BASIC manual earlier than I can remember and began throwing together small "programs." When Dad brought home Visual BASIC, I really went to town. Then, I began examining HTML and creating my own Web pages. A few years ago, I started dabbling in Javascript. Now, I can't get enough. My two main projects which taught me most of what I know about Javascript and DHTML were small helper programs I wrote to go along with two Facebook apps: Heroes and PackRat. These programs garnered me a little fame, but mostly, they were great learning experiences -- teachers, if you will. As many times as I scoured the Web in search of scripts which would do what I wanted or close to it in order to to teach me how to do it, it would be a great token of karma to turn around and make my knowledge available to others. So, here is a little lesson...

Hare today, gone tomorrow.

Anyone who has worked much with any Adobe product or other similar design software is familiar with layers. Layers act like pieces of glass stacked one on top of the next. Each layer can contain a piece of art. It can be moved around or removed all together and it has very little (if any) effect on the others layers above and below. DHTML has layers, too, sort of. They are specified with the DIV tag. Starting with <div> and ending with </div>, everything in between is on what I like to think of as a layer. When given enough instruction, these DIV layers can move around and be turned off and on just like a layer in Photoshop or Illustrator. For instance, within the BODY tags of an HTML file, we could find this:

<div id="one">Layer 1</div>
<div id="two">Layer 2</div>
<div id="three">Layer 3</div>

If the HTML file were viewed, it would like something like this:

Layer 1
Layer 2
Layer 3

Let's say we want to make Layer 2 invisible. We don't want to delete the information, we just want to hide it. By adding style="display:none" to the DIV tag, the layer disappears:

<div id="two" style="display:none">Layer 2</div>

So, the HTML file, when viewed, would now look something like this:

Layer 1
Layer 3

The information on "two" still exists in the HTML file; the browser just hides the layer, making it look as though it is no longer there. But, what if you want the layer to be visible at the click of a button? Well, what we have to do, then, is to show the layer by making it visible again. This, we accomplish with Javascript. The first thing we have to notice is that I have already assigned IDs to the layers. "One," "two," and "three" distinguish each layer from each other. What we want to do is to change the style of "two" from "none" to "block," making it visible. So, within Javascript tags in the HEAD, we add this:

function showLayer(whichLayer) {
document.getElementById(whichLayer).style.display="block";
}

Then, we create a "link" somewhere on the page which activates the Javascript:

<a href="#" onclick="showLayer('two')">Show Layer 2</a>

There are a few things you should notice about the Javascript function and the "link." First of all, notice that nowhere in the function does the word "two" appear. Instead, what I have created is a function which could show any layer specified within a "link," instead of just "two." It uses "whichLayer" to pass which layer from the "link" to the line which actually makes a layer visible. So, then notice the "link." The link passes the variable "two" to the function, letting the function know that the you want to make a change to that layer and not another. If you changed the "two" to "one," the function would attempt to show "one." "One" is already visible, however, so nothing would happen. However, if style="display:none" was added the DIV tag for "one," passing "one" to the function would then make an invisible "one" visible. One last thing to notice about the "link:" There is no URL specified. Instead, "#" is used. This is a way to keep the browser from changing pages, and, instead, only activating the Javascript function.

Using a combination of DIV tag specification and variable passing through "links," lots of changes can go on where "layers" are concerned. So, that's a very brief (and hopefully understandable) explaination of DIV layers. They're part of the backbone to real DHTML design.