Making Secondary Windows

  1. basic script:
    Here is the most useful window-popper I have found. It is based on the event "onclick" (onMouseOver could be substituted); it does not require a separate <script> tag and allows you to specify many things about the new window that opens: size, location, and whether it has a toolbar, a location (= address, navigation) bar, or a status line (at bottom of screen).

    <a href="[file-to-be-loaded-into-window]" onclick="window.open(this.href,'popup',
    'position=relative,top=,left=,width=,height=,location=yes,
    status=yes,toolbar=yes,scrollbars=yes,resizable=yes');return false">

    Notes:

    1. in actual use, this script must be written with no spaces or line feeds in it. Javascript is fussier than HTML.
    2. The "return false" tells the browser not to apply the standard action of the main HREF command. Firefox is ok without it, but IE carries out both actions without it.

    If you just fill in the url and nothing else, the effect will be the same as a simple "target" opening: i.e., a window of identical dimensions will open at 0,0 with a full panoply of location, tool, and status bars. But giving positive values in pixels to the top= and left= parameters, we can offset the window from the corner. By specifying the dimensions, we can size the window exactly. On the other hand, we can take out any of the tool, location, and status bars by specifying "no" instead of "yes" for the value, or by simplying deleting them (the default for an unspecified bar is "no".) Similarly, you can prevent scrollbars from ever jumping in with a "no" and you can prevent the window from being resized by a "no" here too. I strongly recommend leaving the resizable property on, even if you take out scrollbars, so that if someone uses a large font, they can enlarge the window to assist in viewing.

    It is quite nifty to size the window to contain just an image. This is done by getting the dimensions of your image and using those as the dimensions of the new window. To prevent the browser 10-pixel border, make an .html wrapper for the image, setting margin:0 for its BODY and making the dimensions of the image "100%". This has the added advantage of letting you give the new window a title. (See the example in the Exercise below). The script here, which I call popwin, is a real work horse and I keep it on tap as a snippet in HTMLKit and as a macro in Xemacs.

    There is an bit of Javascript to pop up windows that size themselves to their image contents, but it does not provide a way to position the individual windows that result, so I am putting it off until later.

    Carmin Karasic's With Liberty and Justice for All is a classic site combining strong Javascript window handling with strong content. Much can be learned from this site.

    Note: the Firefox pop window blocker will block K's crucial secondary windows. (If the button appears in the extreme left end of the status bar, it needs to be clicked and the site allowed; then reloaded.) As popup blockers become more common, you may need to attach a notice that your site uses secondary windows and request the viewer to disable popup blockers for your site.

    Exercises:
    1. Write the file winpopper.html that produces this effect. That is, the page should have links opening three windows A, B, and C filled with files A.html, B.html, and C.html. Push the browser displaying winpopper to the right of the screen so that it will not cover A, B, and C and click on the links to open A, B, and C.
    2. Add links "Send A to B" etc. targeting the three secondary windows.
    3. Add location to B and status to C.
  2. self-sizing and self-locating windows

    Another way to size and locate a secondary window is to use Javascript inside a SCRIPT container at the top of the file to be loaded instructing the window to resize and move itself:

    <script language="Javascript"> 
    <!-- hide from old browsers  
    function SetWindow()
         {
         self.moveTo(5,5);
         self.resizeTo(430,560);
         self.scrollTo(0,0)
    }
    
    // stop hiding  -->
    </script>
    

    In addition, this function has to be called with an onLoad in the BODY tag of the document:

    <body onLoad="SetWindow()">

    When the file is loaded, this tells the browser to offset the window slightly, resize to 430px by 560px and make sure it is starting at the top of the new window.

    Exercise:
    • How could you use the code of this section to get the browser holding winpopper.html in the previous exercise to slim down and get out of the way of A, B, C?
  3. managing focus: [more advanced]

    Soon after you start opening secondary windows, they start disappearing behind other windows. This is more or less ok if you don't want them anymore, but there are times when you do want one—a menu perhaps, or control panel—to stay "on top", which is to say, in focus. Normally, when you click on or in a window, it gets the focus, and you can't do anything in a window until it has the focus. One such way of doing that can be found in the Karasic site: it recaptures the focus every 5 seconds. Another way used these days is to put the two browser event-triggered commands in BODY:

    onBlur="this.focus();" onLoad="self.focus()"

    Here another onLoad command grabs the focus to the window (which it usually gets anyway); onBlur means the mouse leaves the window, but here this event reasserts focus for the window as the mouse leaves it.

    Another situation may arise when you have opened a viewer window that you want to send various pages to. Obviously you do not want this page to lose focus and become hidden by other pages, because it might then load the new page and the viewer would never see it. What you want to happen is to have the viewer window jump into focus when a new page is loaded into it. What we need is a slight variation on popwin. This bit of Javascript will open a viewer window ("popup") and combines that with an instruction to make the new window focus:

    function newWindow(newContent)
      {
    winContent = window.open(newContent, 'popup', 'left=200,top=80,width=800,
                 height=600,toolbar=no,scrollbars=yes,resizable=yes')
    
    winContent.focus()
      }
    

    This defines the function newWindow which can be called with a javascript HREF:

    <a href="javascript:newWindow('xyz.html')">link trigger</a>
    

    Clicking on "link trigger" will open the 800x600px window "popup" offset 200px from left and 80px from top, place xyz.html in it and make sure it is in focus.

    To see these two focus managers at work, look at Panoramic Astronaut View of The Great Basin. (Page requires the DjVu browser plugin.) The site illustrates how focus can be passed in a controlled way from window to window. The design is somewhat intricate but it accomplishes the purpose of loading different pages into the menu window and resizing it appropriately while maintaining its plain, toolbar free look.

    [Return to Topics]