(Last Updated 11/1/98)


Java Script PopUp Window



A script to open another window upon clicking on a link.


(Picture drawn by DeAnna Krusman.)
Click to meet another leprechaun.


The code to produce the effect is very simple. at the picture I have inserted:
<A HREF="#" onclick="windowOpener();return true;">
<IMG SRC="lep_new2.GIF"></A> In this snippit, the Anchor points to itself ("#") because the link is found in the windowOpener function.

The function that implements this is found in the header. It is: function windowOpener() { picWindow=window.open("","displayWindow","menubar=no,scrollbars=no,width=215,height=221");
picWindow.document.write('<HEAD><TITLE>Carl</TITLE></HEAD>
<BODY BGColor="#FFFFFF">'); picWindow.document.write("<CENTER>
<IMG border=0 src='../Sleepy/Carl_ski.gif'></CENTER>"); return true; } In essence, the new page is defined in its entirety in this header function. In the above example, its name is defined as "picWindow". Its size is stated and it is defined to have no menubar or scrollbars.

The first line which starts with "picWindow=window.open" is the line that defines the new window. In general this line has the form:
Var = windowObject.open(URL, windowName, Parameter list)
In this line:
  • Var is the variable which holds the new window object;
  • windowObject is (an optional) name of an existing window object (ex. "self", "window", "parent", "top");
  • URL is the URL of a document to load into the window or an empty string to create a blank window;
  • windowName is a string specifying an HTML name for the window to be used by the TARGET attribute;
  • Parameter list is a series of parametes that specify the window.
    •  Parameters are included by simply naming them or by setting their value to "yes" or "1". The same parameters may be disabled by omitting them or by setting their value to "no" or "0".

    All methods (naming or using yes|no or 1|0) may be combined in the same script.
    (ex. The line "toolbar,status=yes,menubar=1" turns all 3 items on.)

    The parameters which specify the window dimensions require their values to be in pixels. The features that were added with Java Script 1.2 are indicated by a star before the description of the parameter. The parameters that can be included here are:
    directoriesno|yes includes the Personal toolbar (not all browsers support this)
    menubarno|yes includes the Menubar
    locationno|yes includes the URL bar
    mresizableno|yes Allows the user to resize the window
    scrollbarsno|yes includes the horizontal and verticle scrollbars (only if necessary)
    titlebarno|yes prevents the window from having a title bar is the value is no (or 0).
    Title bars are included by default.
    toolbarno|yes includes the toolbar
    widthnumber widow width in pixels
    heightnumber widow height in pixels
    alwaysLoweredno|yes*moves the window below all other windows on the screen, even when it is active.
    alwaysRaisedno|yes*moves the window above all other windows on the screen.
    dependentno|yes*creates a window that is not a child of the present window by choosing a value of "no" or "0".
    hotkeysno|yes*disables most (not "exit" or "security") hot keys if the window has no menu bar.
    z-lockno|yes*prevents the window from moving above the other windows on the screen when it is activated.
    innerHeightnumber*Specifies the height of the windows viewing area.
    innerWidthnumber*Specifies the width of the windows viewing area.
    outerHeightnumber*Specifies the height of the entire window.
    outerWidthnumber*Specifies the width of the entire window.
    screenXnumber*Specifies the distance from the left edge of the sceen to the left edge of the window.
    screenYnumber*Specifies the distance from the top of the sceen to the top of the window.

    In the example given the window did not receive its data from a URL. It received it dynamically using "picWindow.document.write". This line looks familar because it is writing HTML code. Therefore all HTML tags for the new window have to be included.


    As an addendum, there is a possible source of confusion with the property defaults. There is an individual default for each property and there is a group default. The problem is they are different. Individually, the items default to off. However, if no parameters are specified at all, the group in its entirety defaults to on. Therefore, to force a complete default to off, you should choose 1 parameter and define it as off. (ex If "toolbar=no" is the only parameter listed, it will be set to off and all remaining parameters will default individually to off.)



    Contact Carl Paulson with questions,
    or Visit my pages.