Fifteen Simple Methods of Doing Web Page Pop-ups

The IE createPopup Pop-up Method
The CSS Height and Width Properties Pop-up Method
The Window Pop-up Method
The CSS Color Properties Pop-up Method
The Video Pop-up Method
The Banner Animator Pop-up Method
The CSS Opacity Property Pop-up Method
The setTimeout Pop-up Method
The DOM setAttribute Pop-up Method
The DOM appendChild Pop-up Method
The CSS Z-index Property Pop-up Method
The CSS Visibility Property Pop-up Method
The Hide Div Outside Page Area Pop-up Method
The CSS Display Property Pop-up Method
The Gif Pop-up Method

The Art of Using an Overlay Mask with Your Pop-up Method



Above are 15 separate pop-up methods. Most of them work fine on any browser as long as you don't use onLoad to load them but, instead, rely on intentional movement or click of the mouse. The Window Pop-up Method above used an onLoad event to load a window, purposely, to let you see that browsers' pop-up blockers will activate. Except for IE Mac, which allowed the window to come right up. Of course, IE Mac is an abandoned orphan, and this old browser was expecting the user to install a third party pop-up blocker if he felt bad about pop-ups.

Every time a browser is updated, it fixes a few bugs and adds a few features, and the same can be said for operating systems. XP Service Pack 1 allowed vulnerabilities in the proprietary IE createPopup pop-up method but XP SP2 fixed these holes by limiting the number, size, and placement of these pop-ups. (Why they couldn't have fixed the two XP biggies while they were at it is anyone's guess! One cannot see parts or all of file names on the status bar or in headers when that damnable "C:\Documents and Settings\HP_Administrator\My Documents\" is taking up all the room. This should have been an option so one could also choose to just see the folder and filename ONLY. And the Open dialog needed to have choices of a default setting of Detail, and not just List mode, or at least use your favorite mode of viewing by using the mode you last used. Everyone wants this change, but the mental giants at Microsoft are using these horrific aggravations as leverage to get you to buy Vista, even though it has even more serious problems, as we all know.)

Most of the above pop-up methods rely on the mouse to hover over some onscreen object, such as an image or colored div. One can easily fix it, using JavaScript, so that the user triggers either unwanted or wanted pop-ups because the user is bound to move the cursor over certain areas. Some pop-up blockers probably catch overuse of onMousemove, since it serves the same pop-up triggering function as onLoad, since who keeps a totally still mouse when Net surfing?

Anyway, it's a fact that website designers often need to employ a pop-up. If the need is simply a warning or reminder, often an Alert box will suffice. But the contents of these boxes are so limited that they rarely fill the bill when a pop-up is needed.

We got fancy with the CSS Opacity property type of pop-up, which is a pop-up that slowly appears on the page. There is a lot more code to make this work than ought to be needed. But this is a classic case of each browser maker deciding to go his own way. Worse yet, IE 6, IE 7, and IE 8 all have different coding needs for this feature. The result is that we had to state the opacity codes 4 different ways, to try to please everyone. But, in spite of all the over-coding, with Windows Opera it was no good—nothing appears where the object should be. With Mac IE, the object appears instantly without opacity fade-in. The biggest lack in these CSS properties is the lack of addressibility from DHTML JavaScript routines. No DOM-addressible CSS properties on a couple of these opacity properties means that you can use a For loop and increase the numbers the easy way while changing the opacity percent by DHTML for two of these but the other two cannot do it this way—there is no known way of dynamically changing this percent. Which means that a DHTML routine will cover you on some browsers but not others. IE will be the messiest of the DHTML routines to write, due to the IE 6, IE 7, and IE 8 differences.

One cool way to get a pop-up that's also animated is with an animated GIF file, which you can create with ImageForge or GIF Animator, and any message you want to get across can be included as graphics text. Experiments show that this is more effective than image cycling JavaScript if the images are fairly closely spaced in time (half second or less). The browsers all cause problems with the rapid cycling via JavaScript, but a GIF of considerable size will create no difficulties for any browser. I used a 794,290-byte 615-pixel by 407-pixel GIF as a sample, and I expected problems but the browsers all acted tolerantly.

Another way to get a user into something is with an embedded video set to autostart. I prefer ALL videos to sit there and allow me the choice about whether to play them or not, and so do most people. But the advertisers lately have shown us no such respect—they have videos playing off to the side trying to get us to spend money on something we do not want and do not want to hear about or see, and it severely interferes with scrolling the page downward to see content. So, you might want to refrain from setting it to autostart, in your web page designs. I noticed that even though most browsers loaded the video just fine, Windows Opera gave a message that said that a plugin is needed. And some of the browsers did what we all hoped they'd do: they ignored the autostart and waited until we either clicked the Play button or double-clicked on the video before it would play.

I was expecting some pop-up blocker dissent when I used the setTimeout Pop-up method, since it's trivial to use this method like onLoad to simply pop up a pop-up when the page loads. But no such dissent occurred. Perhaps there are blocker settings for this type of thing . . . ?

To sum up, there are so many cool things that can be done with pop-ups that it would be a shame if this type of browser potential was somehow curtailed by browsers or blockers. But, on the other hand, it would be great if we could block the recent glut of video ads contaminating the surfing experience. If only they'd at least do us the solid of letting us push a play button to signify our interest in their hype. Comments?

There are yet other ways of doing pop-ups, especially popping up a big image from a thumbnail image:

On the following page, the div itself gets enlarged and so does the image, and the z-index gets altered as well, but all this is temporary during mouseover. At mouseout, it all reverts back to the way it was: Enlarging Web Page Images with Mouseover

If you want an enlarger that uses mouse cursor monitoring, try Making an Image Enlarge When The Mouse Cursor Is Hovering Over It

If you want to make thumbnail images enlarge into the center of the screen when the mouse cursor hovers over them and also float there regardless of scrolling, try Keeping Floating Thumbnail Enlargement Centered Onscreen While Scrolling

If you want to make images enlarge off to the side when the mouse cursor hovers over them, try Popping Up a Bigger Image to the Side But Not on Top of the Thumbnail Image