Inside Technique : Popup Menus in IE 5.5
By Scott Isaacs

There is a new toy for web developers - the Internet Explorer 5.5. As we play and learn about the new developer features in this new browser we will be writing about them. As you read these articles keep in mind that we are working with a new browser and are learning as we about the latest features as we go. Some of our techniques may not be the best and some of our assumptions may not be correct. Our hope is to help you learn about the new features and some of the new and powerful tricks this latest beta enables. We welcome your feedback and are especially interested if you have better solutions or would like to correct any of our techniques.

In this article we focus on one of the top issues developers hit once they start using CSS Positioning - the inability for positioned content to overlap the edge of the document window. This problem most often arises when you try to create a menuing system that needs to overlap a frame or window boundary.

Prior to Internet Explorer 5.5 all positioned content was displayed within the confines of the page. Internet Explorer 5.5 enhances your control over displaying and positioning content with support for a new popup window that can be displayed over all other windows anywhere on the page. To demonstrate, we are going to create a simple menu that can overlap the window boundaries - something that was impossible prior to Internet Explorer 5.5.

Creating a popup window with this new IE 5.5 feature is quite simple. First, you create the popup object using the createPopup() method.

var oPopup = window.createPopup();

This method returns an invisible psuedo-window object. We call this object a psuedo-window object because it exposes a very small set of properties, the most important being the document object. With the document object, you can manipulate the appearance and set the contents of the popup window:

var oPopupBody = oPopup.document.body;
oPopupBody.style.border = "1px black solid"
oPopupBody.innerHTML = "This is a test"

Once the contents are set all you need to do is display the popup window. You display popup window's using the popup object's show() method. This method has 4 required arguments and one optional argument. The 4 required arguments define the top, left, width, and height of the popup window. The last argument is optional and defines the element to offset the popup window from (eg., to display a tooltip you would offset the popup window from the element that is providing the tooltip). If this argument is omitted, the popup window is displayed offset from the upper-left of the window. For example, to display the popup window:

oPopup.show(0, 10,100,100)

Once the window is displayed, it stays visible until any other window is activated. At that time, the window is automatically hidden. You can also force the window to hide using the hide() method (eg., you want the window to hide automatically).

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