So, You Want A Pop-Under Window, Huh?

By Joe Burns

Use these to jump around or read it all...
[The Basic Thinking]
[Here's the Code]
[The Effect...on Command]
[The Effect Using onLoad]

When something new hits the Web, be it good or bad, the email pours into HTML Goodies asking how to get the effect. Most of the time, the resulting tutorial makes a lot of people happy. This one may not.

Many of you may be familiar with pop-up ads. Well, the latest incarnation of those ads are what are called "pop-under" ads. These are basic JavaScript-driven new windows that pop up behind the main window rather than lying over the top.

Advertisers love them because they are new and are causing a stir. Surfers are less enthusiastic. To that end I'll probably take some heat for posting this tutorial, but my job is only to give code and not judge how one uses it.

...like how I danced around that one?


The Basic Thinking

OK, here's the thinking. In order for a new window to fall behind the parent window, we're going to have to do what's known as blurring focus on that new window. You may have noticed in your own surfing that pop-under windows do quickly show up as an outline and then fall back behind the main window. That quick appearance is the new window coming to full focus. Once that focus is on the window, commands in the code immediately blur that window's focus and it falls behind.

In order to assign that blur to the entire window we will have to assign that window a single JavaScript variable name. That way, whatever effect we put to that variable name, affects the entire window. Get it? OK. Let's look at the code.


Here's the Code

<SCRIPT LANGUAGE="JavaScript">

function goNewWin() {

//***Get what is below onto one line***

TheNewWin =window.open("popunderexample.html",'TheNewpop','toolbar=1,
location=1,directories=1,status=1,menubar=1,
scrollbars=1,resizable=1');

//***Get what is above onto one line***

TheNewWin.blur();

}
</SCRIPT>

<CENTER>
<FORM>
<input type="button" VALUE="click me!" onClick="goNewWin()">
</FORM>
</CENTER>

The code is pretty straightforward. First we set a function I titled "goNewWin()". That function allows us to call on the entire effect when we want to.

Next you'll notice that the basic "window.open" pop-up window format is assigned to the variable "TheNewWin". That is so we can now affect the entire new window by simply attaching the effect to a single variable.

Please note the lines in the code that suggest you get that entire new window text on one line. That's rather important if you're not a big fan of JavaScript errors. Finally we get to the line that makes the magic:

TheNewWin.blur();

Just as I said above, we attach the "blur()" effect to the variable name representing the entire new window. Please keep the empty parentheses after the blur command. You have to have those.

I finished up the example by setting the function to fire using a basic form button:

<CENTER>
<FORM>
<input type="button" VALUE="click me!" onClick="goNewWin()">
</FORM>
</CENTER>

More than likely, you won't use the effect this way. I am just doing it to show you the effect on command. In fact, let's see the effect...on command.


The Effect

Click the button and watch carefully. The window will manifest and then fall back popping under the main window.


The Effect Using onLoad

As I said before, a button seems a silly method of using this format. You want the effect to fire as soon as the page loads. In order to get that, you'll simply delete the HTML button code above and fire the function using the onLoad Event Handler in the BODY tag. It'll look something like this:

<BODY BGCOLOR="FFFFFF" onLoad="goNewWin()">


That's That

Now you have the code for popping under all the windows you desire. Just keep in mind that surfers aren't exactly thrilled with new pop-up windows. They might not be overly giddy about new pop-under windows. Use this only when needed and try not to use it to force a surfer's hand.

Enjoy!

[The Basic Thinking]
[Here's the Code]
[The Effect...on Command]
[The Effect Using onLoad]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date