Web Development

How To Hide a Frame With JavaScript

How to Hide a Frame with JavaScript

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

3. Last of all in the same document you added the JavaScript to, add a link like this:

<a href="#" onClick="javascript:HideFrame()" target="_self">Hide This Frame!</a>

That’s it! Click the Hide Frame link and watch your frame disappear!

Enjoy!

About the author

Written by Ben Sinclair.

http://www.webmaster-resources101.com Ben Sinclair is the Webmaster of Webmaster Resources 101 (http://www.webmaster-resources101.com/) and Webmaster Forums 101 (http://www.webmaster-forums101.com/)

If you found this post useful you may also want to check these out:

  1. How to Hide your JavaScript with PHP!
  2. Presenting a “Good-bye” Message Without Popups Using JavaScript
  3. Javascript setTimeout Problem
  4. JavaScript Double Click Trapper
  5. Form Required Fields JavaScript Check
  6. Automatic Page Events