1. Computing

Popup Windows

5. Positioning the Window

clr gif

The popup windows that we have looked at so far in this tutorial series have poppped up at whatever position on the screen that the browser thought was appropriate. This may be okay some of the time but wouldn't it be better if we could decide where on the screen to place the window rather than letting the browser decide?

One way is to assign values to top and left to define the desired position for the top left corner of the window in the same way that we assigned values to width and height to define the window size.

TheNewWin = window.open('','name','height=255,width=250,
continued from previous line toolbar=no,directories=no,status=no,menubar=no,
continued from previous line scrollbars=no,resizable=no,top=20,left=20');

This only sets the position the first time the window is opened though. If we are intending to reuse the same window for multiple popups then we will want to relocate the window to the desired location immediately after the window opens instead.

TheNewWin = window.open('','name','height=255,width=250,
continued from previous line toolbar=no,directories=no,status=no,menubar=no,
continued from previous line scrollbars=no,resizable=no');
TheNewWin.moveTo(50,50);

The parameters for the moveTo are the left position followed by the top position for the top left corner of the window.

This moveTo statement immediately after the one that creates the window will move the window from where ever the browser puts it to the location that you specify. This will happen very quickly and so will hardly be noticd by your visitors.

©2014 About.com. All rights reserved.