Pop-up Windows How To

Using the openPopWin() function
to manage Pop-up Windows

Implementing the openPopWin() function on your Site is easy if you follow the three steps outlined below.

Step 1 - Copy the following to the <HEAD> section of your html code file.

<SCRIPT Language="JavaScript">
<!--
// Copyright 1999 - 2002 by Ray Stott, Pop-up Windows Script ver 2.0
// OK to use if this copyright is included
// Script is available at http://www.crays.com/jsc

var popWin = null    // use this when referring to pop-up window
var winCount = 0
var winName = "popWin"
function openPopWin(winURL, winWidth, winHeight, winFeatures, winLeft, winTop){
  var d_winLeft = 20  // default, pixels from screen left to window left
  var d_winTop = 20   // default, pixels from screen top to window top
  winName = "popWin" + winCount++ //unique name for each pop-up window
  closePopWin()           // close any previously opened pop-up window
  if (openPopWin.arguments.length >= 4)  // any additional features? 
    winFeatures = "," + winFeatures
  else 
    winFeatures = "" 
  if (openPopWin.arguments.length == 6)  // location specified
    winFeatures += getLocation(winWidth, winHeight, winLeft, winTop)
  else
    winFeatures += getLocation(winWidth, winHeight, d_winLeft, d_winTop)
  popWin = window.open(winURL, winName, "width=" + winWidth 
           + ",height=" + winHeight + winFeatures)
  }
function closePopWin(){    // close pop-up window if it is open 
  if (navigator.appName != "Microsoft Internet Explorer" 
      || parseInt(navigator.appVersion) >=4) //do not close if early IE
    if(popWin != null) if(!popWin.closed) popWin.close() 
  }
function getLocation(winWidth, winHeight, winLeft, winTop){
  return ""
  }
//-->
</SCRIPT>
<SCRIPT Language="JavaScript1.2">  // for Netscape 4+ and IE 4+

</SCRIPT>

Step 2 - Put a call to the closePopWin() function in your <BODY> tag as shown below.

<BODY onUnload="closePopWin()">

Step 3 - Use the following syntax to open each pop-up window (You can easily complete this step for all your links by using my Design and Test Links page).

openPopWin(winURL, winWidth, winHeight [, winFeatures, [winLeft, winTop]])

where:
   winURL - url of document to be loaded into window or "".
   winWidth - width of image in pixels.
   winHeight - height of image in pixels.
   winFeatures - a comma separated list of additional features, see below.
   winLeft - see "Controlling the Location of Pop-up's" for more information.
   winTop - see "Controlling the Location of Pop-up's" for more information.

winURL, winWidth, and winHeight are required. winFeatures, winLeft, and winTop are optional.

Additional window features - Including the comma separated list for winFeatures is optional. Listed below is the meaning of each feature.
   toolbar - creates the standard browser toolbar.
   location - creates a location entry field.
   directories - creates the standard browser directory buttons.
   status - creates the status bar at the bottom of the window.
   menubar - creates the menu at the top of the window.
   scrollbars - creates scrollbars when the document grows larger than the window.
   resizable - allows the user to resize the window.

Important Note - If "", which is a zero length string, is used for the winURL then you must dynamically write the document (instructions for accomplishing this are included in step 3). The advantage of dynamically writing the code is that the document is already loaded and will be displayed much faster.

Some examples - The following is the openPopWin() code that was used to open each of the 5 pop-up windows used in this Pop-up Windows Demonstration / Tutorial.



  openPopWin("docWrite.htm", 550, 370) 

  openPopWin('jsPWinHow.htm', 740, 450, 'menubar,toolbar,scrollbars,resizable,status')

  openPopWin('jsPWinDesign.htm', 740, 450, 'menubar,toolbar,scrollbars,resizable,status')

  openPopWin('jsPWinDyn.htm', 570, 450, 'menubar,scrollbars,resizable,status')

  openPopWin('jsPWinFAQ.htm', 540, 450, 'menubar,scrollbars')

[ Design and Test Links ]