In The Frame - DHTML

Now that you know the theory behind the new DOM, it's time totake off the gloves and get your hands dirty. In this article, find out howthe new rules apply to old favourites like image swaps, form validation andframe navigation, and then learn how to use ordinary JavaScript to add andremove elements from the document tree on the fly.

TABLE OF CONTENTS:

By: Vikram Vaswani, (c) Melonfire

Poor Best

Rating:

/ 5

May 09, 2001

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

It's also interesting to see how the DOM works with frames. Consider the following example, which sets up two frames, "left.html" and "right.html".


<html>
<head>
</head>
<frameset  cols="20%,*">
<frame name="left" src="left.html" scrolling="auto" frameborder="no">
<frame name="right" src="right.html"  scrolling="auto" frameborder="no">
</frameset>
</html>

In order to illustrate how to navigate across frames, I'm going to write a simple script which changes the background colour of the right frame when the appropriate link is clicked in the left frame. Here's the right frame


<html>
<head>
</head>
<body id="body">
</body>
</html>

and here's the left frame - note how each link calls the changeFrameBackground() function with a color as parameter.


<html>
<head>
</head>
<body>
<a href="javascript:changeFrameBackground('red')">Red</a>
<br>
<a href="javascript:changeFrameBackground('blue')">Blue</a>
<br>
<a href="javascript:changeFrameBackground('green')">Green</a>
<br>
<a href="javascript:changeFrameBackground('black')">Black</a>
</body>
</html>

Finally, let's take a look at the function which does all the work.


<script language="JavaScript">
var bodyObj = top.right.document.getElementById("body");
function changeFrameBackground(col)
{
bodyObj.setAttribute("bgcolor", col);
}
</script>

Since this is a frameset, it's necessary to prefix the document.getElementById() method call with a reference to the appropriate frame. This prefix is necessary to identify to the DOM which frame is being called, and to obtain a reference to the correct document tree.

Once a reference to the right frame's <body> tag is obtained, changing the frame's background colour is a simple setAttribute() away.

This article copyright Melonfire 2001. All rights reserved.

Next: Branching Out >>