New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Collapsible Frame Script

Author: Dynamic Drive

Note: Last updated May 21st, 03'. Script rewritten.

Description: If your site uses frames, a fantastic feature to add would be the ability to collapse/expand a particular frame on user demand. This allows a frame to be tucked away when it's not needed. Well, this script enables you to do just that. It works on any straightforward "columns" or "rows" frames setup, and script works in both IE4+ and NS6+. Note that this script is not compatible with pages that use a combination of both frame columns and rows.

Demo: Click on the collapse frame links below.

Collapse Top Frame to 5 pixels | Collapse Top Frame to 0 pixels


Directions Developer's View

Step 1: Insert the below code in the <head> section of the "master" frame page (the page containing the <frameset> tags):

Select All

Step 2: Once the script is installed, all that remains is invoking the resizeFrame() function anywhere within one of your frames' pages and in the desired format (ie: via text link, a form button etc). Here's an example, with which you can add inside any one of your frames' pages:

<a href="javascript:parent.resizeFrame('5,*')">Contact/Expand Top Frame</a>

Function resizeFrame() accepts one parameter- a string containing the new frames' rows or cols setting once it's collapsed. It uses the exact same syntax employed in HTML to control your frames' dimensions, so a value of '5,*' for example, means that the first frame should be 5 pixels in dimension, and the second frame filled to occupy the remaining space when the former is collapsed. Clicking on the above link again returns the frames to their original set up.

In the following example, a button completely collapses the bottom (or right if using columns) frame when clicked on:

<form>
<input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
</form>

You can be as creative as you want in calling resizeFrame(); how about invoking it when the user double clicks on the target frame to collapse it?

<script>
document.ondblclick=function(){
parent.resizeFrame('1%, 50%, 49%')
}
</script>

As you can see, this script can be as versatile as you want it to be!