for December 30, 1996: Netscape 4.0 Preview: Layers

Note About The Demo: Please wait a moment for the page finish loading if you would like to see the demo. Due to the frailty of the beta, you may have to reload.

Did that remind you of Pointcast or what? That little intro just begins to show off the capabilities of a new Netscape technology: Layers. Not only can you specify exactly where you want your images (or text) to be placed, you can also move your images anywhere on the page. Just specify the offset or the absolute coordinates and the rest will be done for you. After experimenting with layers for a small amount of time, I found that they are very much like the layers you deal with in Photoshop. A layer of a higher z-order is always displayed on top of a layer that has a lower z-order. You can specify that a layer be "transparent" or have a solid background image or color. There are many other options that you can control, but first let's get to the fundamentals: how to create a layer. Very simple:

    <LAYER NAME = "myLayer" HEIGHT = 50 WIDTH = 89 LEFT = 93 

	                           TOP = 91 VISIBILITY = HIDE>
    the content
    </LAYER>

Everything inside the LAYER tags is part of that layer. The LEFT and TOP parameters determine how far (in pixels) over from the left and from the top the layer will be placed on the page. The HEIGHT and WIDTH parameters are optional, and can be in percent or in pixels. The VISIBILITY tag allows a layer to be visible or invisible on the page. To make a layer visible, set it's VISIBILITY parameter to "SHOW". To hide a layer, simply tell it to "HIDE". To control a layer through JavaScript start by defining it. For example, to define "myLayer":

    var myLayer = document.layers["myLayer"];

As you can see, this is done so that you don't have to refer to document.layers["myLayer"] every time you want to access the layer named "myLayer". Now that you have control of the layer in JavaScript, try moving it with the offset() Method:

    myLayer.offset(10, 5);

The offset() method uses x,y coordinates to control the placement of a layer. The above line will move the layer (and all of its contents) to the right 10 pixels and down 5 pixels. Making those numbers negative will move the layer to the left 10 and up 5. Keep in mind, the offset() method doesn't say exactly where the layer is on the page, just how much it should be moved relative to where it currently resides. To control its absolute placement on the page, us the layer's left and top properties.

    myLayer.left = 100;
    myLayer.top = 100;

This will place "myLayer" exactly 100 pixels from the left side of the page and 100 pixels from the top of the page. Think of it this way: everything is in relation to the top left corner of the page. Note that most of the properties in the Layer tag itself can be accessed through JavaScript. In fact, when I was fooling around with layers for the first time, I didn't even use the documentation. I just took the parameters in the tags and guessed that they would work the same way in JavaScript... and they did. For instance, to make the layer invisible (or hide it), simple set the visibility property of the layer to "HIDE":

    myLayer.visibility = "HIDE";

The layer will then disappear. To make it reappear set visibility back to "SHOW". Using this property, you can create something similar to dynamic image menus, but with text and other media. The possibilities are endless.

Now you may ask, "How did you did you slide those graphics across the page?" Well, I combined the offset() method with setTimeout(). Each time setTimeout() was run, it moved the layers a given distance across the page. Repeat this process a given number of times and the layers will end up in the correct places and eventually form a JTotW title image. I'm not going to go in detail on how it was done this week: just poke around in the source and you'll figure it out. After all, you now know how to control layers, the rest is just creativity.

For those of you who want to learn more about Layers: Netscape has already released some docs on it. I assume they will eventually become part of the upcoming Navigator 4.0 JavaScript Authoring Guide.