More Pop-Up Windows

(intermediate)


     


Suzanne Carter-Jackson of Vancouver's ZeroCattle is the author of this extremely friendly and very customizable popup window script.

She asks that her script be 'distributed wildly': I'm only too happy to comply!
The script contains full explanations for its use. There are two variations given for the window: a simple one and one that's a little more configurable. The explanations for each are given in the code below. (Notice that I have enabled all the options in the second window; it looks very klutzy, but it shows what you can achieve with the code. To disable any unwanted elements, just set the options to no. In addition, Suzanne's script references an image file: I've replaced that with an .html file. The possibilities are endless!)

<script language="JavaScript" type="text/javascript">

<!--

/*
Suzanne's popUp code and full explanation
Please redistribute wildly and include this comment.

Good references:
http://www.irt.org/articles/js128/index.htm - primer
http://www.irt.org/articles/js205/index.htm - almost complete control of pop up windows
*/

// this variable names the current window (for using the popUp as a remote)

window.name = "currentWindowName";

// this function opens the pop-up window

var newWin;

function popUp(page, name, details) {
newWin=window.open(page, name, details);
newWin.focus();
return false;
}

/* Use this in the A HREF tag:

Standard (nothing but the file):

<a href="images/image.jpg" onClick="return popUp('images/image.jpg', 'imageName', 'width=xxx,height=xxx,resizable=yes')"></a>

Custom (all the options, remove what you don't want):

<a href="images/image.jpg" onClick="return popUp('images/image.jpg', 'imageName', 'width = xxx,height = xxx,directories = yes,location = yes,menubar = yes,resizable = yes,scrollbars = yes,status = yes,toolbar = yes,screenX = xxx,screenY = xxx,top = xxx,left = xxx')"></a>

By default, all options are off. To enable an option, therefore, you must use option=yes. All options are enabled in the custom example. Replace "yes" with "no", or remove the option to disable it. "xxx" should be replaced with pixel values. screenX, screenY, top and left position the window on the screen, and you need both to have it work in IE and Netscape

You can use .html files or images, same as usual with an <a> tag.

*/

//-->

</script>

Suzanne provides an additional option: an external JavaScript (.js) file that will call the script from the <a href> tag in your page. (It's the same script as above). To use the external script, reference it by including this line of code in the <head> of your document:

<script type="text/javascript" language="JavaScript" src="popup.js">
<!-- Copyright ©2000 Suzanne Carter-Jackson -->
</script>