The Popup Object

UI Tips

The Popup Object

An Overview

By Andrew Flick and Devin Rader

Microsoft Internet Explorer 5.5 has a great tool forcreating rich user-interfaces. This tool is known as the popup object. Somepotential scenarios that you might use this object for are the creation of acontext menu, a drop-down menu, a custom message box that isn t a dialog box,or even custom tool tips. There are three concepts to understand how toeffectively use this object:

For the purpose of this article, we ll take the first twofor granted, because they are more related to dealing with DOM and HTML.Instead, we ll delve into employing the popup object. This article is meant togive a general overview of the popup object and also a walkthrough in creatinga context menu.

Understanding the Capabilities of the Popup Object

Before implementing or utilizing any new tool, it s bestto gain a better understanding of the capabilities of what the tool can andcannot do. For instance, the popup object will always close when the userclicks away from it. Because the popup object never has focus, all theprocesses continue to run in the parent window. The popup object cannot have atextbox or any elements that can be selected inside it. Also, once the popupobject is displayed, it can t be resized or moved by the user. Finally, if you replanning on targeting Firefox, don t use this.

Introduction to Using the Popup Object

To create a new popup object, simply call createPopup offthe window object:

oPopup = window.createPopup();

When creating a popup object, you are essentially creatinganother window that has its own document collection. So, simply setting thebody s innerHTML property will allow developers to place almost anything they dlike into the popup:

oPopup.document.body.innerHTML = "

SomethingStuff

";

However, when creating the popup there are somerestrictions as to what is possible with IE 6 and SP2 that include propertieson size, screen position, and z-order. For more information on what thoserestrictions are see AboutWindows Restrictions.

The last thing that is essential to creating the popupobject is positioning the popup object. You have the capability to position theobject when displaying or showing the popup:

popup.show(iX, iY, iWidth, iHeight [, oElement])

The show method has four required parameters and a singleoptional one. iX and iY are integers that specify the x and y coordinates ofthe popup window and are measured in pixels. iWidth and iHeight specify thewidth and height of the popup window in pixels. Finally, oElement specifieswhere the x and y coordinates are relative. For instance, document.body, a span, orif left blank the desktop where (0,0) is the upper-left corner.

An example to tie together the above three concepts wouldbe to create a simple notification popup via Windows Messenger:

var Popup = window.createPopup();

function popupClick()

{

Popup.document.body.innerHTML = "

"

Popup.show((Popup.document.Script.screen.availWidth-10),

           (Popup.document.Script.screen.availHeight),150,120);

}

The above code simply positions the popup notification onthe bottom corner of the screen and takes the screen resolution intoconsideration. You ll also notice that we left the optional parameter blank andused the relationship to the desktop. The power of using this functionality isshowing that the popup does not display inside the browser window, but ratherin the bottom corner of the screen (see Figure 1).

Figure 1: Position the popupnotification on the bottom corner of the screen.

Creating a Context Menu with the Popup Object

Now that we ve explored the basics of utilizing the popupobject, let s explore some of the other scenarios. To start, we ll explore thecreation of a context menu. The key to creating a context menu is getting theposition of the mouse click and using that in the show method:

var oContext = window.createPopup();

function contextMenu()

{

 oContext.document.body.innerHTML= ContextMenu.innerHTML;

 oContext.show(event.offsetX+ 5, event.offsetY, 200, 75, document.body);

}

The real trick here is for the click event getting thelocation of the click and using that location in the x and y positioning ofthe popup object. You ll notice that we set an offset on the x coordinate. This makes sure that themouse pointer is not directly over the top of the first menu item.

The second key part of creating the context menu is tocall the event from either a SPAN or area defined for the context menu, or tohave it override the context menu for the entire body of the page:

You ll notice after calling the context menu that wereturned false to make sure that the default Internet Explorer context menu wasnot displayed. Finally, the real meat of the code for creating the context menuis the DIV tags that create the context menu itself:

   Infragistics

     Home Page

   Infragistics

     Devcenter

 ...

To create this context menu, we included a few tricks froma previous column. The first thing you ll notice is a DIV tag enclosing theentire context menu, and then multiple DIV tags creating the elements of themenu itself. We handled two events inside the menu item s DIV tags: themouseover and mouseout event. These two events enabled us to give the user avisual cue as to what was being highlighted. To do the highlighting, we used aDirectX Filter, which gave us the ability to do gradients. For more informationon the capabilities of DirectX Filters and Transitions see our article SpiceUp Your UI.

The last section of the DIV tag is to define the text areain a SPAN and implement the onclick event to send the user to the desiredlocation. After running this sample, you ll see the results as shown in Figure2.

Figure 2: Run the sample to see thisscreen.

Conclusion

This is just a brief introduction to the capabilities thatyou can use the popup object to create. For more information, see the MSDNarticle Usingthe Popup Object. It doesn t meet the requirements for every scenario,especially if you re targeting multiple browsers, but with the limitations inmind it is a great UI tip to add that extra bit of functionality to yourapplication.

With that, we remind you to e-mail your questions to us [email protected].

Andrew Flick isProduct Manager of NetAdvantage Windows Forms Technologies & TestAdvantagefor Infragistics, Inc., a Microsoft Visual Studio Industry Partner. He isresponsible for spearheading product management and strategies of Infragistics Windows Forms product line. He works directly with the Director of Developmentto set the direction, plan, and manage product development. Andrew is aMicrosoft .NET MVP and is the chair of the INETA Academic Student Committee.Contact Andrew at mailto:[email protected].

Devin Rader is anInfragistics Technology Evangelist and is responsible for authoringInfragistics reference applications and .NET technology articles, as well asthe world-wide delivery of Infragistics technology demonstrations. Devin is anactive member and leader for INETA, has served as the sole technical editor fornumerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:[email protected].