Home / Web Building Tutorials / Beginner's Guide to DHTML

 

 

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS

-Free applets
-Web Tutorials
-Link to Us!

.
Red_CurlyC035.gif (995 bytes)
DHTML in NS 4- The <layer> tag

This could either be a good thing, or a bad one, depending on your view. DHTML in NS 4 is quite simple, and comes down to essentially one word- Layer. I was pretty astonished myself, but its true- NS 4 relies completely on a new tag, called the <layer> tag, to spin up its DHTML magic. This new tag is dynamic in that it can be positioned anywhere on a web page (without relation to other content), moved around, its content inside updated on demand, and more.

-Basic syntax

The basic syntax of the <layer> tag can't be simpler (as if any tag in HTML is complicated!):

<layer>Text inside layer</layer>

The <layer> tag is a content tag, which means you can add into it content (like <table>). Go ahead, try inserting the above code onto your page...you'll notice that the text inside the layer floats above other text, and overlaps them. Imagine a layer as a sheet of paper that resides on top of the rest of the page, and does not take up space within the flow of the document.

-Layer attributes

A layer by itself can't be more boring, not to mention useless. Fortunately, there's more to it. Layers support attributes that allow you to position it using the x,y coordinates-system, give it a background, clip it (make only certain area of the layer visible), hide it from view, and so on. I've listed the most important layer attributes below:

Layer attributes
id The name of the layer, used to identify it in your script
left The position of the layer in relationship to the x coordinates
top The position of the layer in relationship to the y coordinates
width The width of the layer, in px or %
height The height of the layer, in px or %
bgColor The background color of the layer
background The background image of the layer
src The external html document contained inside the layer

Mix and match different attributes any way you like. Here's a sample layer that uses some of the above attributes:

<layer id="mylayer" width=100px height=70px bgColor="yellow"><h3>A layer</h3></layer>

A layer

Notice I didn't specify the left and top attributes. When you don't, the layer is positioned where you defined it.

-Scripting layers

Here's one of the most important thing to learn about layers- how to script them. After all, its the scripts that make layers come alive. To access a layer, you need to use the following syntax:

document.layername

Accessing the layer is just the first step. Once you've accessed a layer, you can then go on and manipulate one of the layer's attributes to produce dynamic effects. I'll show a simple example where a layer's background color interchanges between red and blue:

Here's the source code I used:

<layer id="test" width=80px height=80px></layer>

<script language="JavaScript1.2">
//variable that helps alternate between red and blue
var thecolor=true

//Apply a bgColor of blue as the initial layer color
document.test1.bgColor="blue"
function changecol(){

//if thecolor=true
if (thecolor)
document.test.bgColor="blue"
else
document.test.bgColor="red"

//set thecolor to the opposite of its current state
thecolor=!thecolor
setTimeout("changecol()",1000)
}
changecol()
</script>

All of the layers' attributes are read/write, so be sure to experiment with each of them!

-Tutorial Introduction
-What is DHTML?
-DHTML in NS- The <layer> tag
-DHTML in IE 4
-Dynamic Content
-Moving elements around in the document
-Creating cross-browser DHTML

DHTML in IE 4

.
http://www.javascriptkit.com
CopyRight 1997, 1998 JavaScript Kit. NO PART may be reproduced without author's permission.