Using JavaScripts to Make Your Page Dynamic

Once you've positioned a content block on the page using <DIV> tags in your HTML, you can use JavaScript to modify its properties. This has many possible consequences: you can move the entire block up, down, left or right. You can change its background color, or change the clipping region, causing more or less of the block to be visible. Speaking of visibility, you can even hide or show the entire block in an instant via the visibility property.

How, then, does JavaScript access the style properties of the content block? The answer is twofold:

1. Assuming that you are not familiar with JavaScript, you may start knowing it this way that data structures in javascripts are represented as objects, and each object has a set of properties. JavaScript statements can read or write to the properties of an object.

2. Content blocks contained in <DIV> tags are exposed as objects to JavaScript by the Document Object Model. This means that, following the object and property specifications defined by the DOM, JavaScript can access the style sheet properties of the content block.

Let's recall our example content block, mailblock. In its simple form:

	<DIV ID="mailblock"
		STYLE="position:absolute;
		width:auto;
		height:auto;
		left:400px; top:50px;
		background-color:white">
	<A HREF="mailto:me@yahoo.com">Mail me!</A><BR>
	<IMG 	SRC	= "mail.gif"
		width	= 30
		height	= 15
		alt	= "Mailbox"
		>
	</DIV>

Because Netscape and Microsoft do not currently share compatible DOMs, the above block is exposed to different objects in each browser. For now, we'll consider each case separately.

In Netscape's DOM, each <DIV> block takes the form of a Layer Object. In Microsoft, each block is exposed as a DIV object, which in turn possesses a STYLE object, whose properties reflect the familiar style attribute properties.This might sound confusing, but it's all a matter of syntax. Let's first consider how you would construct a JavaScript reference to mailblock. You use the identifier specified in the ID attribute.

Microsoft:

document.all.mailblock

Netscape:

document.layers["mailblock"]

Now, let's consider the background color property for mailblock. The CSS property for the background color was "background-color" as specified in our <DIV> tag. When reflected via the DOM, however, this property takes on a different name between browsers.

Microsoft:

document.all.mailblock.style.backgroundColor

Netscape:

document.layers["mailblock"].bgColor

Knowing that, we can easily create a JavaScript statement which would change the background color of mailblock to green.

Microsoft:

document.all.mailblock.style.backgroundColor="green";

Netscape:

document.layers["mailblock"].bgColor="green";

Similarly, we can modify the top and left style properties which will move the block on-screen. Thus, once we know the correct DOM property for the style sheet left property, we can move mailblock directly to the left edge of the page:

Microsoft:

document.all.mailblock.style.left="0px";
OR
document.all.mailblock.style.pixelLeft=0;

Netscape:

document.layers["mailblock"].left=0;