Home arrow DHTML arrow Page 5 - Rough Guide To The DOM (part 2)

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:
  1. Rough Guide To The DOM (part 2)
  2. Making The Swap()
  3. Turning The Tables
  4. Well-Formed
  5. In The Frame
  6. Branching Out
  7. Dumbing It Down
  8. Conclusions
By: Vikram Vaswani, (c) Melonfire
Poor Best
Rating: starstarstarstarstar / 5
May 09, 2001

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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.


 
 
>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire
 

blog comments powered by Disqus
   

DHTML ARTICLES

- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts
Find More DHTML Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap

Dev Shed Tutorial Topics: