DHTML Lab - DHTML Diner - IE4: Dynamic Frame Resize (Bottom-Right Frame) | WebReference

DHTML Lab - DHTML Diner - IE4: Dynamic Frame Resize (Bottom-Right Frame)

Dynamic Frame Resize

The frameset that contains this page is a standard nested frameset, extremely common on the web today:

<FRAMESET ID=outerFr COLS="200,*">
    <FRAME SRC="left.html">
    <FRAMESET ID=innerFr ROWS="170,*">
        <FRAME SRC="top.html">
        <FRAME SRC="bot.html">
    </FRAMESET>
</FRAMESET>

We've purposely kept the attributes to a minimum for clarity. The addition of attributes to the FRAME or FRAMESET tags will not affect our technique in any way.

The outer frameset takes the place of the BODY tag, so Explorer exposes it to scripting exactly as it does BODY:

document.body

All properties associated with framesets become properties of document.body if it exposes a frameset. These include cols and rows. Both of these properties store a string value reflecting the COLS= and ROWS= attributes of the FRAMESET tag.

We can, therefore, easily change the FRAMESET COLS= and ROWS= values by assigning new values to document.body.cols and document.body.rows. Since our script will invariably be present in a frame, we must specify the frameset document by preceding document.body with parent. Thus, to change the columns of the parent frameset to "300,*" we issue this statement from a child frame:

parent.document.body.cols = "300,*";

Click the button below to execute the statement. Wait three seconds and the frameset will be restored to its original size with:

setTimeout("parent.document.body.cols = '170,*'",3000);

Nested Framesets

With nested framesets, it is best to give each frameset an ID for easy referencing. In our current example (see code above) the outer frameset that defines the columns, is given an ID of outerFr, and the inner one, which defines the rows, is given an ID of innerFr.

To reference them from any child frame:

parent.outerFr and
parent.innerFr

It's that straightforward. Of course, the frameset objects can also be retrieved from collections such as all or children, or searching for matching tagNames, and so on. We have attempted to cover the most intuitive and shortest methods for addressing the framesets.

Use the tool below to resize the current frameset. Experiment. The left frame has a button that restores the original layout in case you size the frames out of the frameset. The string "*,0" hides the right frame or bottom frame, and "0,*" hides the left frame or the top frame, depending on whether they are assigned to cols or rows.

The JavaScript properties that reflect the current state of the frameset are displayed in the right fieldset. Issuing them as statements will result in the visible layout.

We have not included all the sizing options available, just enough to demonstrate the technique:

Enter a New Value:

Left Frame Width: 
Top Frame Height: 
This Frame Width: 
This Frame Height: 

JavaScript Necessary

IE4 browsers display results here


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 11, 1998
Revised: May 11, 1998

URL: http://www.webreference.com/dhtml/diner/frresize/