Popup Windows

7. Resizing Popup Windows

If we are going to reuse the same popup window for calls from multiple links (as discussed in the last tutorial) then there may be times when these popups actually need different sized windows. We can handle this situation by passing the required size of the window to the function that is generating the popup window. We then call a command to resize the window immediately after creating it so that the window will be resized correctly if it already exists.

Here's the code that we need to do this:

function openPopup(pageName,winWidth,winHeight) {
TheNewWin = window.open(pageName,'mypop','height=' winHeight
',width=' winWidth ',toolbar=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no');
TheNewWin.resizeTo(winWidth 2,winHeight 30);
...

Note that I have added 2 to the width and 30 to the height when calling the resizeTo command. This is because the command sets the outside of the window to this size while the open command sets the inside window size. The sides of the window itself are one pixel wide while the 30 pixels extra height allows for the title bar (and some other horizontal bars that Mozilla based browsers insist on displaying).

Where the function is called and the popup window (called mypop in this example) is not already on the screen then the window.open statement will create it with the specified size. When this happens the resizeTo will have almost no effect because the window is already that size or very close to it. The bottom of the window will move down slightly in those browsers that don't have the extra horizontal bars.

If another call to this function has laready occurred from elsewhere and the width and height are different from that of the existing mypop window then the size options on the open command will be ignored (as the window already exists). When this happens the resizeTo will then reset the window size to that required by the what is to be displayed in the window for this call.