Propix - Popup

Popup windows

These examples demonstrate how to open popup windows,

when the main document loads,
some time after the main document,
if the user clicks on something,
if the user moves the mouse over something.

To use it on your own page:

Save this file on your local disk.
Open it with an editor cabable of displaying HTML source.
Copy the text between separator comment lines and paste it into your file. The separator lines contain 80 '#' characters so they are easy to find.

Before downloading the page please register. There is no registration fee, I only want to know who are interested, and I may send a note if new version is available.

Explanation

The main function uses the window.open JavaScript function after some error checking.

ScreenX and ScreenY are for Netscape Navigator, left and top are for Microsoft Internet Explorer.

// Main function. Works on both MSIE and NN.
// Parameters:
//   url   : Address of popup
//   x, y  : Upper left corner coordinates
//   w, h  : Window size
  function popup(url, x, y, w, h) {
    if (x==undefined || x=="") x="0";
    if (y==undefined || y=="") y="0";
    if (w==undefined || w=="") w="100";
    if (h==undefined || h=="") h="100";
    win = window.open(url, "_blank",
      "menubar=no,toolbar=no,location=no,directories=no,status=no," +
      "copyhistory=no,resizable=no,scrollbars=no," +
      "ScreenX=" + x + ",left=" + x + "," +
      "ScreenY=" + y + ",top=" + y + "," +
      "width="   + w + "," +
      "height="  + h);
    win.focus();
    return win;
  }

Calling the funcion when the main window loads is very simple:

popup("pop1.html",100,100,150,160);

window.SetTimeout is used to call the function 5 seconds later:

window.setTimeout("popup('pop1.html',250,100,150,160)",5000);

When the user clicks on the button, the parameters are extracted from the form:

<input type="button" name="Click" value="Click here to open popup"
onClick=popup("pop1.html",mForm.x.value,mForm.y.value,mForm.w.value,mForm.h.value)>

The mouseOver event is enclosed in <a> tags to support Netscape Navigator:

<a onMouseOver=popup("pop1.html",mForm.x.value,mForm.y.value,mForm.w.value,mForm.h.value)>
<img src="Ball.gif"></a>