WWW FAQs: How do I center a new browser window on the screen?

2007-05-30: You can center a newly opened browser window on the screen with the top and left parameters to the window.open JavaScript method. To understand how this works, first read and understand the article How do I open a new window of a certain size?

Now that you're familiar with window.open, you're ready to control the window's position as well as its size. But to center the window, we need to know the size of the screen. How do we get that information? Easily! JavaScript provides it in the screen.width and screen.height variables.

You can only open a new window in response to a user action, like clicking on a link. Otherwise pop-up blocker software installed on all modern PCs will block your window from appearing.
To open a centered window, all we have to do is find the middle of the screen, subtract half the width and height of our new window, and use the resulting coordinates as the top and left parameters to window.open.

There's a catch: not every browser is friendly to the width, height, left and top options of window.open. But in my tests, all browsers did cooperate with the window.resizeTo and window.moveTo methods of changing a window's size and position after it is opened. So as an insurance policy, we'll use these too after we open the new window.

But what if the window we're asking for is bigger than the screen? Newer browsers will just limit the window size to the screen size and refuse to position the upper left corner where it can't be seen. But older browsers, such as Internet Explorer 5, might allow that to happen, causing frustration for the user. We can take care of that by double-checking that our centered window actually fits on the screen.

The following simple web page opens a new 300x200 pixel window, centered on the screen, when a link is clicked:


<html>
<head>
<script>
<!--
function wopen(url, name, w, h)
{
  // Fudge factors for window decoration space.
  // In my tests these work well on all platforms & browsers.
  w += 32;
  h += 96;
  wleft = (screen.width - w) / 2;
  wtop = (screen.height - h) / 2;
  // IE5 and other old browsers might allow a window that is
  // partially offscreen or wider than the screen. Fix that.
  // (Newer browsers fix this for us, but let's be thorough.)
  if (wleft < 0) {
    w = screen.width;
    wleft = 0;
  }
  if (wtop < 0) {
    h = screen.height;
    wtop = 0;
  }
  var win = window.open(url,
    name,
    'width=' + w + ', height=' + h + ', ' +
    'left=' + wleft + ', top=' + wtop + ', ' +
    'location=no, menubar=no, ' +
    'status=no, toolbar=no, scrollbars=no, resizable=no');
  // Just in case width and height are ignored
  win.resizeTo(w, h);
  // Just in case left and top are ignored
  win.moveTo(wleft, wtop);
  win.focus();
}
// -->
</script>
</head>
<body>
<a href="page.html" target="popup"
  onClick="wopen('page.html', 'popup', 300, 200); return false;">
Click here to open the page in a new window. </a>
</body>
</html>

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.