Inside Technique : Popup Frames
By Scott Isaacs

Dynamic HTML allows you to dynamically change the size of individual frames in a frameset. You can use this technique to create frames that automatically appear and disappear.

At the bottom edge of your window, you will see a gray bar. Moving the mouse over the gray bar displays a navigation menu. Moving the mouse away from the navigation menu will hide the frame after a short delay. ^{IE4 Only}

This technique requires no extra work on the part of the author. You define your frameset the same way you normally would, except you define a very small size for the frame that will autosize:

  <FRAMESET ROWS="*,5" BORDER=0 FRAMEBORDER=0>
    <FRAME SRC="top.htm NAME=content">
    <FRAME SRC="menu.htm" SCROLLING=NO>
  </FRAMESET>

In the above definition, the menu.htm file is displayed in a 5 pixel high frame. This is just enough to see the top border of the document. If you navigate from the menu, the entire window will be replaced with the new document. This is because the menu.htm page defines that all links target the top of the window. Changing TARGET="_top" to TARGET="content" in menu.htm results in the navigation frame to be retained as the user navigates.

The next step is to define your menu.htm document. This document requires the inclusion of a few lines of code. This code handles the displaying and hiding of the menu:

  <SCRIPT LANGUAGE=JavaScript>
    // This code is copyright 1997, insideDHTML.com, LLC.
    // http://www.insideDHTML.com
    // You have permission to modify and reuse this code
    // as long as this copyright notice is not removed.

    var hiding = null // For caching a timer reference

    function doOver() { 
      if (event.fromElement==null) {
        // User entered the frame
        clearTimeout(hiding)
        // Expand the frame to the full size of the contents
        // This may need to be modified depending upon the 
        // structure of your frameset.
        newSize = "*,"+document.body.scrollHeight
        parent.document.body.rows = newSize
      }
    }

    function hideIt() {
      // Shrink the frame
      parent.document.body.rows = "*,5"
    }

    function doOut() {
      if (event.toElement==null) {   
        // User left the frame
        clearTimeout(hiding)    
        // Delay hiding the menu
        hiding = setTimeout("hideIt()",1000)
      }
    }

    document.onmouseover = doOver
    document.onmouseout = doOut
  </SCRIPT>

Thas is all that is necessary to create the AutoHide frame. However, you usually are going to want a custom appearance for the navigation menu. In our navigation menu (menu.htm), we defined the following style sheet:

  <STYLE TYPE="text/css">
    BODY {background: lightgrey; margin: 0pt; 
          margin-bottom: 6pt; border: 3pt lightgrey ridge}
    TABLE, TD {margin: 0pt; padding: 0pt}
    TD {padding-left: 5pt; padding-right: 5pt; 
        vertical-align: top; text-align: center}
    TD A {text-decoration: none; color: navy}
    TD A:hover {color: darkgreen}
  </STYLE>

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