Developer

Learn how to position windows

To enhance the user experience on your Web site, use consistent window positioning. Here's how.

By Brent Lee Metcalfe

Give your site visitors a break. Unless you have good reasons for doing so (and I do believe there are good reasons), don't leave users wondering where the next pop-up window is going to erupt onto their screen. Consistent window positioning lends an air of comfort and flow to the user experience. This tip prevents windows from opening haphazardly on the user's desktop.

It's a simple tip to implement, but not all Web builders do it.

var putItHere = null;

function topLeft() {
  putItHere = window.open('topLeft.html','posA','width=200,height=300,top=40,left=40');
}

Using the top and left features, specify in pixels the distance you want to place the top-left corner of the subwindow from the top-left corner of the screen.

Precise placement of windows relative to the user's desktop speaks volumes. Placing a window dead center shrieks, "Look at me!" JavaScript lets Web builders put windows where they want them—and then some.

You can't get much more centered than this:

var putItThere = null;

var chasm = screen.availWidth;
var mount = screen.availHeight;

var w = 0;
var h = 0;

function deadCenter(w,h) {
  putItThere = window.open('center.html','posB','width=' + w + ',height=' + h + ',left=' + ((chasm - w - 10) * .5) + ',top=' + ((mount - h - 30) * .5));
}

Plainly put, the top and left features are used to calculate the relative x-y coordinates, placing the subwindow smack-dab in the center of the screen. To do this, subtract the window width (w) and pixel width of the side chrome borders (10) from the available screen width (chasm) and multiply by the x coordinate (.5). Then subtract the window height (h) and the pixel height of the top and bottom chrome (30) from the available screen height (mount) and multiply by the y coordinate (.5).

As if we'd expect otherwise, the two power browsers have thrown a wrench into the works by having slightly different chrome dimensions. So 10 pixels for accumulative chrome width and 30 pixels for chrome height are general measurements that accommodate both IE and Communicator, not precise chrome measurements of either.

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks

Free Newsletters, In your Inbox