Creating a Pop-up or Pop-under Ad Window

When most people think of pop-up and pop-under windows, the main use that comes to mind is to display an ad so that is what I will use as an example in the following description of how to create one. These windows can be put to other uses as well and the following is equally applicable to those situations except that the content of the new window will be different.

When you first loaded this page in order to read this information, it loaded the pop-under ad that I will be using in the following examples onto your computer. You may have noticed it flash into view before being moved behind this current window. To take a look at the ad just minimize this window and the one with the ad in it should become visible or alternatively look for a window called Computer Help in your windows task bar and click on that.

To create this pop-under window required that I:

  1. Created a new popup window without a menu bar, tool bar, status bar, or scrollbars.
  2. Attached the page content that I wanted into the new window.
  3. Transferred the focus back to this browser window. If I had wanted a pop-up instead of pop-under ad I would have transferred the focus to the ad window.

Okay so what code did I use to create this effect? Note that this code should all be placed on one line in your source.

   TheNewWin = window.open('adwin.htm','help','height=255,width=250,toolbar=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');

This is the code required to create a new non-resizable browser window having a height of 255 pixels and width of 250 pixels and not having a menu bar, tool bar, status bar, or scroll bar. The new browser window will open and load the page adwin.htm into it. As this window is a fixed size the page content can be laid out precisely. To make absolutely certain that a scroll bar doesn't appear, we can add style="overflow:hidden" into the <body> statement of the adwin.htm file.

Next step is to position the window on the screen. In this case the window top left corner is located 100 pixels from the left of the screen and 100 pixels from the top. We move the window to that location using the following code.

   TheNewWin.moveTo(100,100); 

You can create adwin.htm (or whatever you decide to call your ad page) as a completely separate web page just the same as any others that you are creating. In the case of the ad that I created, I decided to incorporate the ad page source into the script instead of defining it as an independent page. In order to do this, I removed the name adwin.htm from the open code just leaving the pair of quotes as the first parameter. I then enclosed the html code for my ad page into javascript write statements as follows: Some of the lines of code may wrap on your screen. To help you determine where each line of code starts and finishes each line starts slightly indented so any lines that do not appear indented should be coded on the end of the preceding line.

  TheNewWin.document.write('<?xml version="1.0"?><!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"');
 
  TheNewWin.document.write('"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
 
  TheNewWin.document.write('<head><title>Computer Help<\/title><\/head><body style="overflow:hidden" bgcolor="#ffffff">');
 
  TheNewWin.document.write('<p><img src="img\/comp.gif" width="65" height="55" border="0" alt="Felgall Pty Ltd" class="left" \/>');
 
  TheNewWin.document.write('Want your own web site and don\'t want to do it all yourself?<br \/>Ask Felgall to build it for you.<\/p>');
 
  TheNewWin.document.write('<p class="centre">Reasonable rates.<br \/>');
 
  TheNewWin.document.write('Just <a href="http://www.felgall.com/webspec.htm" >check out our packages and prices<\/a>.<\/p>');
 
  TheNewWin.document.write('<hr \/><p class="right"><a href="#" onclick="self.close();return false;">Close Window<\/a><\/p>');
 
  TheNewWin.document.write('<\/body><\/html>');

To convert the html into javascript write statements, I added a \ in front of each / in the code as well as the ' in the word don't so that these characters would not be interpreted incorrectly as being part of the javascript code. You will need to do this with any special character contained in your html that may be interpreted incorrectly by javascript. Placing the \ in front tells javascript to ignore any special meaning of the following character. I then enclosed the code into a series of javascript write statements as shown above.

To make it easier for the new window to be able to be able to be closed, I included the following code in the page so as to create a close window link:

   <a href="#" onclick="self.close();return false;">Close Window<\/a> 

So now we have the new browser window being created and loaded with the information that we require. the next step is to set the focus to the new window if we want a pop-up ad or the existing window if we want a pop-under ad. We do this using the statement window.focus(); for a pop-under ad or TheNewWin.focus(); for a pop-up.

To be able to call the new window code from within this page, I placed the entire javascript code within a function. The complete function code reads as follows: Some of the lines of code may wrap on your screen. To help you determine where each line of code starts and finishes each line starts slightly indented so any lines that do not appear indented should be coded on the end of the preceding line.

   function goNewWin() {
 
  TheNewWin = window.open('','help','height=255,width=250,toolbar=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');
 
  TheNewWin.moveTo(100,100);
 
  TheNewWin.document.write('<?xml version="1.0"?><!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"');
 
  TheNewWin.document.write('"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');
 
  TheNewWin.document.write('<head><title>Computer Help<\/title><\/head><body style="overflow:hidden" bgcolor="#ffffff">');
 
  TheNewWin.document.write('<p><img src="img\/comp.gif" width="65" height="55" border="0" alt="Felgall Pty Ltd" class="left" \/>');
 
  TheNewWin.document.write('Want your own web site and don\'t want to do it all yourself?<br \/>Ask Felgall to build it for you.<\/p>');
 
  TheNewWin.document.write('<p class="centre">Reasonable rates.<br \/>');
 
  TheNewWin.document.write('Just <a href="http://www.felgall.com/webspec.htm" >check out our packages and prices<\/a>.<\/p>');
 
  TheNewWin.document.write('<hr \/><p class="right"><a href="#" onclick="self.close();return false;">Close Window<\/a><\/p>');
 
  TheNewWin.document.write('<\/body><\/html>');
 
  }

To add this to your page you either place the code between <script> and </script> tags in the head section of your page or alternatively (and preferably) make it a separate file referenced from the <script> tag. If you save your script as popunder.js the code to insert into the head section of your page will look like this:

<script type="text/javascript" src="popunder.js"></script>

The function can then be called when required so as to display the pop-up or (in this instance) pop-under window. To load it when a particular page loads you can either include an onload="goNewWin();" in the body statement of your page or just specify goNewWin(); as a statement within a javascript on your page. You could also attach it to a button or link on the page giving the visitor to your page the choice of whether to open it or not. To link it to a button use:

   <form><input type="button" value="New Win " onclick="goNewWin();return false;" /></form> 

or to use an ordinary link use:

   <a href="#" onclick="goNewWin();return false;">New Win</a> 

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate