Inside Technique : DHTMLLib Windows : Creating Windows

Windows are created by absolutely positioned DIV elements. To keep the table definition as simple as possible, we use table's to create the window effect and links to create the draggable window title. Using links as the title is an extremely simple way to add a title bar but has a disadvantage of requiring the actual text to be clicked on to start a drag operation. Below is the HTML used to create the simple menu window from the demonstration:

<DIV ID=wMenu 
     STYLE="layer-background-color: white; 
            z-index:0; background: white;
            position: absolute; 
            left:0px; width:100px">
  <TABLE WIDTH=100 BORDER=1 
         CELLPADDING=0 CELLSPACING=0 BORDERCOLOR=darkgreen>
    <TR><TD BGCOLOR=darkgreen>
      <A CLASS=windowTitle 
         ONCLICK="return false" 
         ONMOUSEDOWN="window._dragWindow = 'wMenu'" 
         HREF="#">
         <FONT COLOR="white" 
               FACE="verdana" 
               SIZE=-2>
               Menu
         </FONT>
      </A>
    </TD></TR>
    <TR><TD>
       Window Contents
    </TD></TR>
  </TABLE>
</DIV>

All of the italicized items in the above source can be customized with a two limitations. First, the widht of the DIV and the width of the TABLE should be set to the same value. Second, the window must have a unique name and this name must be specified in the onmousedown event handler of the link. Feel free to experiment with the rest of the values.

If you are familiar with CSS-Positioning you may wonder why we did not position the table directly. Both browsers support the absolute positioning of table elements. However, Netscape does not support borders on a TABLE element that is absolutely positioned. To work around this limitation, we wrap the table in a div element achieving the desired effect.

Another interesting issue appears when you are running on the Macintosh. When dragging on the Macintosh (either Netscape or Microsoft), you can drag ahead of the window. When this occurs, it appears as if the outline of the title text is being dragged. This is only a rendering effect and when you release the mouse, the window snaps to the correct location.

Last we show you the script for managing the windows and explained how we worked around an issue with Internet Explorer 4.x for the Macintosh.

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