How To Hide A Frame With JavaScript
by Ben SinclairTuesday, 6th September 2005
This plain, simple and straight to the point tutorial will teach you to hide a frame within a frameset.
1. First of all you need to add a name to your frameset so that the JavaScript can identify it:
<frameset cols="200,*" border="0" name="FrameName">
<frame name="left" src="left.php" target="right"></frame>
<frame name="right" src="right.php" target="_self"></frame>
</frameset>
Change FrameName to anything you wish.
2. Now you need to add this code inbetween the <head> tags in one of the <frame> pages:
<script language="JavaScript">
<!--
function HideFrame()
{
top.FrameName.cols = "0,*";
}
-->
</script>
Again change FrameName to whatever to named the frameset in the HTML code from point 1. Basically the code above is setting the columns of the frameset to 0 pixels in width.
3. Last of all in the same document you added the JavaScript to, add this link code:
<a href="#" onclick="javascript:HideFrame()" target="_self">Hide This Frame!</a>
That's it! Click the Hide This Frame link and watch your frame disappear!
Enjoy!
Ben Sinclair is the Webmaster of DevTutors, Webmaster Resources 101 and Webmaster Forums 101.