Gary L. Simmons  rev 04/19/05  webwonks.org/WebBuilding/PopupWindows.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak Go to next department

Gary's Web Building

JavaScript Popup Windows

Recently I received an avalanche of mail asking me how to put a graphic into a pop up browser window. Well, I was really only buried alive in mail... OK in reality a mail truck dumped mail bags filled with mail about graphics in popup windows in my front yard. Maybe it was just a couple of bags... or possibly one bag. Actually it was just a flurry of mail, or a spate if you will. A small spate... like a dribble, or a drip drip drip. Alright alright I admit it! It was just one single, solitary, itsy-bitsy, inky-dinky, stupid, little, fragging e-mail some idiot sent to me asking me how to do it. Gosh I hate you people! So anyway I thought that was a great subject for a new tutorial

 

so I checked online at some of the links on the Web Building page, purused my bookshelves, checked some reference material in Dreamweaver and went to the library to check out a book. In the process I actually learned something no matter hard I kicked and screamed and I am going to share it with you no matter how hard YOU kick and scream so, get a grip, rev up your brain and read on!

By the way, in order to use the JavaScript on this page you must have a browser capable of using JavaScript and (duh) JavaScript on your browser enabled.


Javascript Basics | Window Elements | Open a Window | Code Key | Dog Slappers | Closing Windows New| Scrolling Windows | Scrolling Tips | Bringing Windows to the Front | Ad Hoc Windows | Positioning Windows | Displaying Alerts | Cold Shower | Final Word

  • JavaScript 

    Although it is possible to open new windows using HTML, the most effective way to create pop up windows that will allow you the most control of your windows is by way of JavaScript. The window is the most important interface element in a web browser and JavaScript will provide you with many tools to manipulate windows.

  • First some basics

    In order to use JavaScript you must treat it a little differently than HTML. All your JavaScript functions are put within your <HEAD> tag and oddly enough commented out! This is so older browsers that do not know about JavaScript can blithely ignore JavaScript and go about its archaic business of pounding two rocks together. Modern browsers know that JavaScript is commented out and take this into account. Remember, all JavaScript starts out with these statements in the <HEAD> tag:

    < SCRIPT LANGUAGE = "JavaScript" type="text/javascript">
        < !--
         JavaScript function definitions within a commented area
         / / -->
    < /SCRIPT>


    The rest of the function calls go within the <BODY> tag. Got it?

  • Browser window elements

    Some of the important browser window elements that can be accessed are shown in Figure 1 below. The names in this figure correspond to the parameters you can apply in the open() command. You can create windows that can have any combination of the listed parts.


Window elements
Figure 1

  • Lets open a window!

    Here is the code in the <HEAD> I am using to open a window:

    < HEAD>
    < SCRIPT LANGUAGE="JavaScript" type="text/javascript>
    < !-- Begin
    function firstWindow() {
    ElementWindow = window.open('images/WindowElements.gif',
    'FirstWin','width=502,height=325')
    }
    // End -->
    < /SCRIPT>
    < /HEAD>


    ... and in the body of the code:

    < BODY bgcolor="#FFFFFF" text="#000000">
    < a href="javascript:firstWindow()">Click to open the popup window!</a>
    < /BODY>


    Click to open the popup window!

  • What the @#$%^&*! does all that code mean?

    < SCRIPT LANGUAGE="JavaScript" type="text/javascript> This is where you told the browser you were going to use JavaScript and all that followed in the script tag was to be interpreted as such.

    function firstWindow() This is a function declaration. You make this code run just by using it's name, firstWindow(), in an HTML statement later on. All the code in a function is between the "{" (left curly bracket) and the "}" (right curly bracket).

    ElementWindow = An ad hoc variable has an open window object assigned to it just now by you, this is just a way to invoke an instance of the window object. This name can be anything except a reserved JavaScript keyword so you can call it most anything, call it "CowPie" and see if I care.

    window.open() In object oriented programming "window" is an object and "open" is a method. This will not be on the test so forget I mentioned it. The "open" method is the interesting part of this because depending on the different parameters or properties (the list of goodies between the parenthesis separated with comas) you can make the window you open appear differently. There are 3 parameters. In the above code the first parameter was the GIF file I wanted to display. In the second parameter I gave the window a distinct name of my own choosing so that it can be referred to by name later (which I don't do). The third parameter is a shopping list of all the window elements as shown in figure 1. I've already shown you the width and height parameters. If you want scrollbars then use the scrollbar element in the third parameter in the form of 'scrollbars=yes', if you don't want scrollbars then don't mention them or use "=no", the same follows for the other elements in Figure 1. You can use any combination in any order you want, for example the line of code can read:

    WinOp = window.open('graph.gif','GraphWin','width=502,
    height=325,resizable=yes,status=yes,toolbar=yes')

    (code should all be on one line)

    ...giving you a window of a specific size that is resizable, has a status area and toolbars. Note that each of the 3 parameters is enclosed in single quotes.

    < A HREF="javascript:firstWindow()">Click to open the popup window!</A> This is the actual function call and an example of how you include it in an anchor tag.

  • Some head slappers and dog kickers

    JavaScript is case sensitive. Make sure you spell words with capitalization exactly the same each time. Also pay attention to the lack of or the occurrence of spaces in the code used here. For instance just the inclusion of a space after the coma in the width and height parameters ('width=502, height=325') will cause them to be ignored by Netscape Navigator and the window will open to a default size. If you are having problems with a window element not working correctly stop kicking your dog and screaming at your spouse and instead check your spelling, case and spacing.

    Netscape Navigator and Internet Explorer display windows slightly differently. You will notice that declaring the height and width of graphic a graphic will give you a different result depending on your browser. Navigator will chop off a portion of the right and bottom of your graphic. Explorer will leave extra space for what looks like would be your scrollbars even though you may not have specified them. Further, specifying scrollbars does not necessarily mean you will see them if the graphic width and height is smaller than the window.

    Be very aware that the two browsers can display identical code in very different ways and you should check both browsers to see how they will display your work. Some features will not work on certain versions of browsers. On second thought... give that damn dog a kick for me!


  • HEY! Close that window!

    Just as you learned how to open a window you must learn to close a window. To open a window, we will just reuse the above function code with some changes to it and add a new link to it. Here is the new code to close the window:

    < HEAD>
    < SCRIPT LANGUAGE="JavaScript" type="text/javascript>
    < !-- Begin
    function closeFirstWindow() {
    ElementWindow.close()
    }
    // End -->
    < /SCRIPT>
    < /HEAD>


    ... and in the body of the code:

    < BODY bgcolor="#FFFFFF" text="#000000">
    < A HREF="javascript:closeFirstWindow()">close the window</A>
    < /BODY>


    Open the window and close the window. Cool eh? The important thing here is to use the name you gave the window, in this case we called it, "ElementWindow". For a more effective use of JavaScript to close a window, go to the Photo Album page and click on a link to a photo. You will see a "Close This Dang Window" graphic. JavaScript makes that graphic an interactive button by adding an anchor to the image thusly: <A HREF='javascript:window.close()'><IMG SRC ='../Images/CloseWindow.gif'</A>. Disregarding the name the window was created with, this command specifies that the window that has the focus, the window on top, will be closed by default. This JavaScript does not need to be in a commented section of code because, if they didn't have JavaScript enabled, they never would have been able to navagate to the button... right?

    Barbara Simon wrote in to tell me that she gets an error using
    ElementWindow.close() and suggests that if the same is happening to you, you should try replacing that code with ElementWindow = window.close(). Thank you Barbara!

  • Scrolling a window

    You can create a popup window that is scrolled down and/or over to a relevant part of a window, such as a location on a large map. Try this out:

    Here is the code in the
    <HEAD> I am using to open a window:

    < HEAD>
    < SCRIPT LANGUAGE="JavaScript" type="text/javascript>
    < !-- Begin
    function scrolledWindow() {
    ElementWindow2 = window.open('images/WindowElements.gif','secWin',
    'width=100,height=100,scrollbars=yes')
    The above line was broken in two for display purposes only!
    setTimeout('ElementWindow2.scroll(150,150)',1000)
    }
    // End -->
    < /SCRIPT>
    < /HEAD>
    ... and in the body of the code:
    < BODY bgcolor="#FFFFFF" text="#000000">
    < A HREF="javascript:scrolledWindow()">Click to open the scrolled popup window!</A>
    < /BODY>


    Click to open the scrolled popup window!

    You will notice the addition of the setTimeout command in the function scrolledWindow. This delays the scrolling by 1000 milliseconds (one second) in order to allow the window to be created first, thereby guaranteeing that there is a window in existence to be scrolled. Makes sense right? The scroll method has parameters of objectName.scroll(horizontal scrollbar pixels,vertical scrollbar pixels). In this example I made the window very small and scrolled to the portion of Figure 1 that had the word "scrollbars".

  • Some scrolling tips:

    Unlike Netscape, Explorer can't scroll a window if the window contains a URL from another server. You can only scroll content on your machine with Explorer.

    You can only scroll windows with Navigator V3.0 or higher, or Explorer V3.0 or higher.


  • Bringing your JavaScript popup windows to the front

    If you have more than one window displayed, you can control which window shows up in front of the others. I have used the functions below in the body tag and the function calls in the anchor tag to bring up two windows and to control which of them is displayed in the front. Experiment with the links and get a feel for it.

    < HEAD>
    < SCRIPT LANGUAGE="JavaScript" type="text/javascript>
    < !-- Begin
    function Figure1Window() {
    Fig1Window = window.open('images/WindowElements.gif',
    'Fig1Win','width=525,height=350')

    The above line was broken in two for display purposes only!
    }
    function blatherWindow() {
    BlatherWin = window.open('Blather.html','yakyak','
    width=200,height=200,scrollbars=yes,resizable=yes')

    The above line was broken in two for display purposes only!
    }
    function FigureToFront() {
    Fig1Window.focus()
    }
    function BlatherToFront() {
    BlatherWin.focus()
    }
    // End -->
    < /SCRIPT>
    < /HEAD>

    < BODY bgcolor="#FFFFFF" text="#000000">
    < A HREF="javascript:Figure1Window()">Click to open the Figure 1 window!</A><BR>
    < A HREF="javascript:blatherWindow()">Click to open the explanation of Figure 1 window!</A><BR>
    < A HREF="javascript:FigureToFront()">Click to bring the Figure 1 window to the front!</A><BR>
    < A HREF="javascript:BlatherToFront()">Click to bring the explanation of Figure 1 window to the front!</A><BR>
    < /BODY>


    Click to open the Figure 1 window!
    Click to open the explanation of Figure 1 window!
    Click to bring the Figure 1 window to the front!
    Click to bring the explanation of Figure 1 window to the front!

    And yes, I loaded an HTML document into the window so put that in your tool belt and smoke it! There is a command that you can use that is the opposite of focus() and will push the window to the very back of the other windows and that is the blur() command. We are quite the window gods eh?

  • Creating ad hoc pages and filling them with HTML

    OK, prepare to get dangerous! In the above example I loaded an HTML document into a new browser window, but you can do that on the fly without having a preexisting HTML file to work with. You can use JavaScript to open a new document and write HTML into the document right before your eyes. Here is how:

    < HEAD>
    < SCRIPT LANGUAGE="JavaScript" type="text/javascript>
    < !-- Begin
    newWindow = window.open('','newWin','toolbar=yes,location=yes,
    scrollbars=yes,status=yes,width=630,height=400')

    The above line was broken in two for display purposes only!
    newWindow.document.write
    ("<HTML>
    < HEAD>
    < TITLE>New Page From the Ozone!</TITLE>
    < /HEAD>
    < BODY bgcolor='#FFFFFF' text='#000000' background='../Images/RoughGrey.gif'>
    < DIV ALIGN='center'>
    < H1><font color='#990000'>This is pretty cool stuff!</font></H1>
    < IMG SRC='../Images/HouseOfWacks.jpg' width='535' height='268'>
    < /DIV>
    < /BODY>
    < /HTML> ")
    newWindow.document.close
    // End -->
    < /SCRIPT>
    < /HEAD>


    Click to run the above code!

    The way I wrote the code was to put it into a function (something I don't show in the code above) and put the function call into the above anchor. If I didn't do that then the code as written above would automatically run when the page loaded and for the purposes of this tutorial would have been confusing to a viewer. As it is now, you have just seen two ways to run the code. By the way, pay attention to how the single quotes are nested withing the double quotes in the document.write code. Also of use is the newWindow.document.writeln("") statement. Experiment. Big heads up: Do as I say not as I do... In the code above I have the HTML formatted to look nice so you can see what I was telling JavaScript to do. Keep in mind that carriage returns mean things to JavaScript. When you write the above code, the parameters to the newWindow.document.write method are all one line. It would actually look like this (the table the code resides in is forcing returns):

    newWindow.document.write ("<HTML> <HEAD> <TITLE>New Page From the Ozone!</TITLE> </HEAD> <BODY bgcolor='#FFFFFF' text='#000000' background='../Images/RoughGrey.gif'> <DIV ALIGN='center'> <H1><font color='#990000'>This is pretty cool stuff!</font></H1> <IMG SRC='../Images/HouseOfWacks.jpg' width='535' height='268'> </DIV> </BODY> </HTML> ")

    For a working example of the usefullness of ad hoc pages check out the Photo Album page. You will see how every new page is created from the same code (a function called "newPhotoWindow()" in the <HEAD> tag) that is accessed in the anchor tags of the photos. By reusing the same code for each photo page, I am able to produce 45 web pages while using up only 7K of disk space! Don't be afraid of using functions. I am able to make each page unique by sending the newPhotoWindow() function new parameters each time I call it and plugging the values of those parameters into the HTML code that the function writes to the ad hoc page it is creating. For example let's simplify that function call to make the page the same except for the graphic it displays.

    The function call in the link would look like this:

    < A HREF="javascript:newPhotoWindow('../path/Photo1.jpg')">Me getting pantsed again</A>

    The function would look something like this:

    function newPhotoWindow(PhotoLocation){
    newWindow = window.open('','newWin','scrollbars=yes,width=630,height=400')
    newWindow.document.write
    ("<HTML>
    < HEAD>
    < TITLE>Pantsed Again!</TITLE>
    < /HEAD>
    < BODY bgcolor='#FFFFFF' text='#000000'>
    < DIV ALIGN='center'>
    < IMG SRC=" +
    PhotoLocation + "width='535' height='268'>
    < /DIV>
    < /BODY>
    < /HTML> ")
    newWindow.document.close
    }


    The value of "../path/Photo1.jpg" was passed to the function newPhotoWindow inside the variable named "PhotoLocation" and then plugged into the HTML code it was creating just by referencing it's variable name. When the browser creates the new page it will read the <IMG> tag and the information you plugged in as "<IMG SRC ='../Photo1.jpg' width='535' height='268'>", pretty cool eh? Big heads up: Do as I say not as I do... In the code above I have the HTML formatted to look nice so you can see what I was telling JavaScript to do. Keep in mind that carriage returns mean things to JavaScript. When you write the above code, the parameters to the newWindow.document.write method are all one line. It would actually look like this (the table the code resides in is forcing returns):

    newWindow.document.write ("<HTML> <HEAD> <TITLE>Pantsed Again!</TITLE> </HEAD> <BODY bgcolor='#FFFFFF' text='#000000'> <DIV ALIGN='center'> <IMG SRC=" + PhotoLocation + "width='535' height='268'> </DIV> </BODY> </HTML> ")

  • Positioning windows

    You will on occasion want to position a popup window on the users screen. You can do this with the "left" and "top" parameters in the window.open properties. If left is zero the window rests against the left of the users screen. If top is zero it rests against the top of the users screen. By increasing the value of left and top you move the window by the corresponding pixels. Here is a function that will put the window in the top left corner of the users screen.

    function centerWindow() {
    ElementWindow = window.open('images/WindowElements.gif',
    'ElementWin','width=502,height=325,left=0,top=0')

    The above line was broken in two for display purposes only!
    }

    Here is the link that would call the above function.

    < a href="javascript:centerWindow()">Click to display the Figure 1 window on the upper left!</a>

    Below I have created a function that will open the Figure 1 window and position it wherever I want within the link by passing it values via the function call itself in the link. I name these values leftPos and topPos, note below where I add them to the function name and then plug them into the window.open properties:

    function centerWindow(leftPos, topPos) {
    ElementWindow = window.open('images/WindowElements.gif','ElementWin',
    'width=502,height=325,left='+leftPos+',top='+topPos)

    The above line was broken in two for display purposes only!
    }

    The link itself looks like this, you can see the top and left parameters it is passing are each set to 100

    < a href="javascript:centerWindow(100,100)">Click to center the Figure 1 window!</a>

    Go ahead, click on the link below and try it out.

    Click to center the Figure 1 window!

    At this point you are probably asking yourself, "How the monkey's knuckles do know how freakin' big the stupid users poly puckering screen IS if I fricken' really want to fraggin' center his slag nasty window?!?!" Well first off, gosh you really shouldn't talk to yourself like that - OR think out loud like that in public. Get a grip. Go get a drink of water. I'll wait....... Back? Calmed down? OK, man I don't know what brought that on but hey I was getting to the point right when you went off on me. If the user has version 4.0 or later of Netscape Navigator or Internet Explorer then JavaScript can determine how big the users screen is using the "screen" object and you can do a calculation based on how big your popup window is then paste that popup right smack in the middle of his screen. Here is what the function will look like:

    function reallyCenterWindow() {
    leftPos = 0
    topPos = 0
    if (screen) {
    leftPos = (screen.width / 2) - 251
    topPos = (screen.height / 2) - 162
    }
    ElementWindow = window.open('images/WindowElements.gif','ElementWin',
    'width=502,height=325,left='+leftPos+',top='+topPos)

    The above line was broken in two for display purposes only!
    }

    There are some important elements in this function you need to get a handle on. I gave leftPos and topPos a value of zero in case the browser can't handle the screen object, that way a null value or previously used value is not passed to the window.open statement. Next I put the calculation of leftPos and topPos in an "if statement" so that the browser would not spit up and die if it was a version of browser that did not recognize the screen object. Now any browser can run this with out complaining, however it will not center in a browser older than version 4.0 in NS and IE.

    The calculation finds the width of the screen resolution in number of pixels and divides this in two, giving you the horizontal center of screen. If you plunked this number into the window.open method, your popup would be too far to the right. You need to take half the number of pixels wide your popup window is, in this case 251, and subtract that from the horizontal vertical of the screen. That would put as many pixels on the right of your popup as there are on the left of your popup. Repeat the process for the vertical center of the screen. You are now centered no matter what the screen resolution the users computer monitor is set to.

    The function call within the anchor is simple on this one:


    < a href="javascript:reallyCenterWindow()">Click to really center the Figure 1 window!</a>

    Go ahead and try it out by clicking on the link below:

    Click to really center the Figure 1 window!


  • Displaying alerts

    You can display a message to your users when they load or reload a page. This is an easy one.

    < BODY>
    onload="alert('Warning: This page contains content of an adult nature... links to laxative sites.')"
    < /BODY>


    Notice the quotes. Try it out, this link will bring up a page that uses the "onload" command (there is also its evil twin "onUnload"). Alert boxes are modal meaning all computer processing grinds to a halt until the user click on the dang "OK" button. These can be annoying and interruptive, so use them with caution. You may find this command to be more helpful to you than to your users as you can display any JavaScript object with it. Try it out when you need to debug some pesky JavaScript. Finally, there is no way to change the text in the titlebar that says it was generated by JavaScript. In older browsers this text is elsewhere in the window. This is a security precaution to help keep morally bankrupt scripters from fooling unsuspecting users into entering passwords or other personal information. That's not you... RIGHT?!?!

  • Take a cold shower

    Now would be a good time to go take a cold shower. I can tell you are way too excited about all this JavaScript window control. There is a huge downside to this. If a user has an old browser that does not support JavaScript or even a modern browser with JavaScript disabled then all this fancy dancy stuff you are coding will only make tighter and tighter coils as it spirals down the drain of your toilet. In other words, if you use JavaScript window control, you must also offer a method of achieving the same goals to your users without JavaScript. Also, one last thing... don't be annoying. Too much of this junk is just plain annoying. There are lots and lots of very sane people who will totally go off on you if you start launching all sorts of windows when they open or close a web document. Be careful and go easy!

    A word about the
    onload() and onUnload() functions. Give people a break, when they arrive at your site they do not want to have to swat down a bunch of windows they don't care about, especially advertising. If you are going to use onload() then do it only if there is no other way to do this such as; you have detected that they do not have a browser or a plugin that will display your page. That sort of thing, but unless your page will not display at all, just tell the visitor on your web page that such and such is required for to access the content of your site. When someone is ready to leave your site he just wants to go. He does not want a bunch of freaking onUnload() windows barring his way out. I get angry when someone does that, just let me the hell out of here you grit eating pencil neck!! Use this one only in the spirit of "wait, you left your hat!", something helpful. These two functions are the most unfriendly and overused JavaScript functions on the net and people will avoid you if you use it on them.


  • Final Word

    You are better off copying code out of the page source rather than copying it off of the surface of the web browsers displayed page. Some line breaks in the code have been forced to allow for formatting the print on the page. I tried to warn you in places I found them but I'm sure I missed some. This will mess you up, this will rip your lips off and duct tape them to your butt, this will grind it's jack boots of JavaScript oppression into your bleeding face. So don't come crying to me... unless you are young and pretty. You men out there, you don't cry right?

    You have a lot of new JavaScript tools here to mix and match with. Experiment, be brave, have fun, make me proud.

Top of page

Back to Web Building