Inside Technique : Hiding & Showing Frames
By Scott Isaacs

Just like standard HTML documents in Internet Explorer 4.0, FrameSets also expose an all collection that allows you to manipulate the size and contents of any frame. This allows you to give the user better control over the layout of the screen. In this example, we demonstrate how the user can selectively display or hide the navigation frame of a frameset.

Below demonstrates this with a CSS help area we are working on (please ignore the close button - this area is intended to be viewed in its own window). The user can selectively hide and show the table of contents by clicking on the checkbox.

Description

In the CSS Help page, three frames defined as follows.

 <FRAMESET border=0 name=fs ROWS="30,*" ONLOAD="fixSize()">
    <FRAME SRC="header.htm" NAME="header">
    <FRAMESET COLS="145,*" ID=info>
      <FRAME SRC="index.htm" NAME="index">
      <FRAME SRC="" NAME="content">
    </FRAMESET>
  </FRAMESET>

The following function is defined when the user clicks on the checkbox:

  function toggleContents(el) {
    if (el.checked) 
      parent.document.all.info.cols = "145,*" // Display the table of contents
    else
      parent.document.all.info.cols = "0,*"   // Hide the table of contents
  }

Code

  function toggleContents(el) {
    if (el.checked) 
      parent.document.all.info.cols = "145,*" // Display the table of contents
    else
      parent.document.all.info.cols = "0,*"   // Hide the table of contents
  }

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.