Inside Technique : Dockable Content
By Scott Isaacs

In this article, we created a generic Internet Explorer 4.x routine for undocking content from your web page for display in its own window. This is useful for navigation menus and panels.

Try undocking the page list to the left (Internet Explorer 4.0 Only) by clicking on the windows icon in the black header bar. When undocked, the content is removed from the page and displayed in its own window. Clicking on the windows icon again closes the pop-up window and redisplays the contents. If the pop-up window itself is closed, the contents are automatically redisplayed in the page.

If you leave the page, any undocked content stays open. When returning to the page, any dockable content is displayed in the page and any opened windows stay open. We did not write code to track the dock state of content when you leave the page. If tracking the state is desired, you would need to use client-side cookies.

The contents of any HTML element can be made dockable. All that is needed is a button that undocks or docks the content. We created the example presented on the first page as follows:

<TABLE WIDTH=150 STYLE="border: 1px black solid" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR BGCOLOR=black STYLE="color: yellow">
  <TD>Page List</TD>
  <TD ALIGN=RIGHT>
    <IMG SRC="/gifs/w.gif" ONCLICK="swapDock('myPageList')"></TR>
<TR>
  <TD ID="myPageList" TITLE="Page List" COLSPAN=2>
    <A HREF="page1.asp">Introduction</A><BR>
    <A HREF="page2.asp">Details</A><BR>
  </TD>
</TR>
</TABLE>

To allow content to be undocked, you need to specify an unique ID and provide a TITLE. The ID is used to locate the element, and the TITLE attribute is used to provide a title for the popup window. Once the ID and TITLE are established, you need to add a button or another element that when clicked calls the swapDock() function passing in the ID of the dockable content. Notice in the above example we tracked the click event on the image.

Next, we walk through how we built this technique. The code is generically written and allows a single page to have multiple docked content panes. In addition, we explain how we communicate between the undocked content window and the browser window.

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