The Popup Object

- NEW

Co-Sponsored by:

Latest Features
�	Columns & Rows: Part II

�	Model: The �M� in ASP.NET MVC

�	Patterns & Practices

�	XAML Marks the Spot

�	Columns & Rows: Part I

Article Rating

Rate this article on a scale from 0 to 5
	5	Best
	4
	3
	2
	1
	0	Worst

Email


Tell a friend about this article!

UI Tips

The Popup Object

An Overview

By Andrew Flick and Devin Rader

Microsoft Internet Explorer 5.5 has a great tool for creating rich user-interfaces. This tool is known as the popup object. Some potential scenarios that you might use this object for are the creation of a context 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 to effectively use this object:

Utilizing DIV tags
Events and the positioning of objects
Using the popup object itself

For the purpose of this article, we�ll take the first two for 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 to give a general overview of the popup object and also a walkthrough in creating a context menu.

Understanding the Capabilities of the Popup Object

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

Introduction to Using the Popup Object

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

oPopup = window.createPopup();

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

oPopup.document.body.innerHTML = "<DIV> Something Stuff </DIV>";

However, when creating the popup there are some restrictions as to what is possible with IE 6 and SP2 that include properties on size, screen position, and z-order. For more information on what those restrictions are see About Windows Restrictions.

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

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

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

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

var Popup = window.createPopup();

function popupClick()

{

Popup.document.body.innerHTML = "<div><IMG SRC='Toaster.JPG'></div>"

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

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

}

The above code simply positions the popup notification on the bottom corner of the screen and takes the screen resolution into consideration. You�ll also notice that we left the optional parameter blank and used the relationship to the desktop. The power of using this functionality is showing that the popup does not display inside the browser window, but rather in the bottom corner of the screen (see Figure 1).

Figure 1: Position the popup notification 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 popup object, let�s explore some of the other scenarios. To start, we�ll explore the creation of a context menu. The key to creating a context menu is getting the position 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 the location of the click and using that location in the x and y positioning of the popup object. You�ll notice that we set an offset on the x coordinate. This makes sure that the mouse pointer is not directly over the top of the first menu item.

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

You�ll notice after calling the context menu that we returned false to make sure that the default Internet Explorer context menu was not displayed. Finally, the real meat of the code for creating the context menu is the DIV tags that create the context menu itself:

<SPAN ONCLICK="parent.location.href='http://www.infragistics.com'">Infragistics

Home Page

</SPAN>

</DIV>

<SPAN ONCLICK="parent.location.href='http://devcenter.infragistics.com'">Infragistics

Devcenter

</SPAN>

</DIV>

...

</DIV>

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

The last section of the DIV tag is to define the text area in a SPAN and implement the onclick event to send the user to the desired location. After running this sample, you�ll see the results as shown in Figure 2.

Figure 2: Run the sample to see this screen.

Conclusion

This is just a brief introduction to the capabilities that you can use the popup object to create. For more information, see the MSDN article Using the Popup Object. It doesn�t meet the requirements for every scenario, especially if you�re targeting multiple browsers, but with the limitations in mind it is a great UI tip to add that extra bit of functionality to your application.

With that, we remind you to e-mail your questions to us at mailto:UITips@aspnetPRO.com.

Andrew Flick is Product Manager of NetAdvantage Windows Forms Technologies & TestAdvantage for Infragistics, Inc., a Microsoft Visual Studio Industry Partner. He is responsible for spearheading product management and strategies of Infragistics� Windows Forms product line. He works directly with the Director of Development to set the direction, plan, and manage product development. Andrew is a Microsoft .NET MVP and is the chair of the INETA Academic Student Committee. Contact Andrew at mailto:andrew@infragistics.com.

Devin Rader is an Infragistics Technology Evangelist and is responsible for authoring Infragistics� reference applications and .NET technology articles, as well as the world-wide delivery of Infragistics� technology demonstrations. Devin is an active member and leader for INETA, has served as the sole technical editor for numerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:devinr@infragistics.com.


� 2009 Penton Media, Inc Terms of Use Privacy Statement