UI Tips
Pop Ups
The One the Blocker Missed!
By Andrew Flick and Anthony Lombardo
Awhile back, I wrote an article about using the popup object to display some type of notification to the user. Continuing along that same theme I m going to provide you, the developer, with the ability to create one of those annoying pop ups that can not be blocked by pop-up blockers. It s a fairly simple concept and a great trick that, when used properly, can give great notification ability to your Web site.
Design the Pop Up
The first step in providing this functionality to your Web site is to create the pop up itself. For this article, we ll use a floating div tag. There are many different things you have options for doing inside this tag. You can add a well-designed graphic or simple text, depending on the amount of effort that you decide to put into this pop up.
After creating this div tag, give it an id that you will remember, so that you can easily access it later in your JavaScript code. The second step is to determine the size of the pop up and assign those size settings to the style of the div tag. After these steps, you should set the position to absolute so it will appear over whatever is on the base layer of the Web page. The next step deals with positioning and gives you a bit of liberty as to how you wish to proceed. One method is to assign a position to the pop up, then set display: none on the div tag and on some event show that div tag. The second method is to set the position of the div tag somewhere off screen, then after an event, move the div tag to the position you would like it to be. In this sample of creating an annoying pop up that pop-up blockers don t catch, we ll use the second method:
HTML
<div id="popupObject" style="background-color: #3399ff; width: 200px; height: 150px; position: absolute; top: 20px; left: -200px"> This is one of those annoying pop-ups that the blockers won't catch.</div>
Find the Pop Up s Location
After setting up our annoying pop up, we need to find a way to display and animate it. To do this, we first need to get access to the left position of the pop up. Before we get the left position, we must get the div tag, our pop up itself. To do this, we will use the JavaScript method getElementById and pass it through the id of our object. The code to get access to the left position of our div tag looks something like this:
JavaScript
function getPopUpLeft()
{
popup = document.getElementById('popupObject');
return popup.style.left;
}
Find the Mid-point of the Browser
After we have the left position of our pop up, we must then move it to some specific location on the screen. In the case of this article, we are going to move the pop up to the middle of the browser window and 20 px from the top of the client area. Now, keep in mind, we don t have a limit as to where we could potentially push this pop-up window. For instance, if we start moving the pop-up window from the left to the right of the screen and don t stop it, it will continue ad infinitum with an annoying effect on the scrollbars. (Not that I m giving you any ideas on how to annoy the users of your Web page). The code to find the mid-point of the browser looks something like this:
JavaScript
function getMidPoint()
{
popup = document.getElementById('popupObject').style.width;
MidPoint = document.body.scrollWidth/2;
MidPoint = MidPoint - parseInt(popup)/2;
return MidPoint;
}
One piece of the above JavaScript that I did not explain was the parseInt method. Simply put, when we receive the width of the popup object, it will look something like 200 px. That px makes it a little difficult to perform any mathematical function on, so we simply get the integer out of that and use that number to do our math.
Animate the Pop Up
Now that we know the end location of this pop up, we need to move it from its starting location to its ending location. To do this, we are going to simply use the left position and continuously add 5 px to it until we reach our mid-point location. Finally, we want to slow down the frequency of how often this function runs. To do this we use the setTimeout method, which will call a function after a set period of time. In the case of this sample, we will repeat the same method, animate, with a pause of five milliseconds. By doing this, we will see the div tag float across the top of the page. The code looks something like this:
JavaScript
function setPopUpLeft(Left)
{
popup = document.getElementById('popupObject');
popup.style.left = Left;
}
function animate_PopUp()
{
popupLft = getPopUpLeft();
midpoint = getMidPoint();
i = parseInt(popupLft);
i = i + 5;
popupLft = (i + "px");
if(i <<= midpoint)
{
setPopUpLeft(popupLft);
setTimeout('animate_PopUp()',5);
}
}
Congratulations, you have just successfully beat the pop-up blocker. If you have a reason for doing this that doesn t involve annoying the user, you may find it convenient to give the user a way to close the pop up. To do this on some event, simply set display= none , which will look something like this:
JavaScript
function close_PopUp()
{
popup = document.getElementById('popupObject');
popup.style.display = "none";
}
Conclusion
This pop up does have a reason to be used and should be used correctly. I have characterized this article as a way to annoy users, but reporting an emergency or providing some important announcement are just a couple of the reasons you may wish to use this tool.
I d like to wish a fond fairwell to my partner in crime, Devin Rader. However, don t let that get you down; I m pleased to introduce my new partner, Anthony Lombardo. Tony is one of the smartest Web developers I know and has been a great friend and awesome colleague as part of the Product Management team at Infragistics. Look for a great article from Tony next month!
With that, we remind you to e-mail your questions to us at [email protected].
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 for Infragistics Windows Forms product line, working directly with the Director of Development to set the direction, plan, and manage product development. Andrew is a Microsoft .NET MVP and an active member of the INETA Marketing Committee. Contact Andrew at mailto:[email protected].
Anthony Lombardo is Product Manager of NetAdvantage - ASP.NET Technologies for Infragistics, Inc., and is responsible for spearheading product management and strategies for Infragistics ASP.NET product line, working directly with the Director of Engineering to set the direction, plan, and manage product development. Prior to joining Infragistics, Anthony served as a Network Administrator for North Brunswick Board of Education and worked for Rutgers University in their technical support division. Since beginning his career with Infragistics in 2000, Anthony has been involved with every aspect of the development cycle, including playing a key role in the creation of the Presentation Layer Framework for ASP.NET, assisting in the creation and implementation of Infragistics Visual Studio 2005 project plan, and determining the product feature set for NetAdvantage 2005 for Visual Studio 2005. Contact Anthony at mailto:[email protected].
