Introduction to Dynamic HTML: Putting the D in DHTML

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 familiar with JavaScript, you know that data structures 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. Voila!

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@myhouse.com">Mail me!</A><BR>
	<IMG 	SRC	= "mailbox.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 -- a future article will look at the issue of patching over this problem in "cross browser DHTML."

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;

Once again, you're likely asking just how one is supposed to discover which DOM properties for which browser map to the style sheet properties we've seen. Two handy on-line references are once again provided -- Netscape's Using JavaScript with Positioned Content (Table 9.1) lists the Layer Object's properties and Microsoft's Style Object Reference lists the properties relevant to their style object. In the effort to make life simpler, however, we provide a dandy table which summarizes which style sheet properties map onto which DOM properties for each browser.

Lights! Camera!

Armed with the understanding of positioned content blocks, and the ability to manipulate their characteristics via JavaScript, you basically need only to rely on your imagination (although JavaScript skill can certainly help). Consider some nifty uses of dynamic positioning:

* Animation: images contained in a positioned block can be moved around the page following a certain path.

* Drop-down menus: modifying clipping regions allows you to show or hide portions of a content block. To create a drop down menu, you would initially show only the top strip of the block containing the menu choices. When the user triggers the menu to drop, you chance the clipping region to display the vertical length of the menu chosen. We'll look at triggers from user events later in this article.

* Content-swapping: by positioning multiple blocks of content at the same spot on the page, yet keeping all but one block invisible, you can quickly swap a new block of content into place by changing their visibility properties. Alternatively, by keeping two overlapped blocks visible, you can modify their clipping regions in such a pattern as to produce a "transition" effect.

If all this sounds daunting, the real work is in the JavaScript code. The properties above make it clear how you can modify content blocks, but it is the JavaScript coding which performs these modifications, sometimes requiring complex loops to yield complex effects.

Introduction to Dynamic HTML: Properties of STYLE
Introduction to Dynamic HTML
Introduction to Dynamic HTML: Dynamic Styles