WWW FAQs: How do I make the window size match my layout?


2006-07-21: JavaScript provides ways to create windows of any size, and also to resize existing windows. That's great, but these methods fall down in one important area: you are setting the size of the entire browser window, including the title bar, address bar, status bar and other decorations. And since these are not consistent from one browser to another, designers wind up adding awkward "fudge factors" to their window sizes. Because at the end of the day, what you really want to do is control the amount of usable space inside the window.
Looking for a quick fix? Don't worry, I provide the finished solution at the end of the article. But read on for a better understanding of why it can't be as simple as you'd probably like!
Is there a better way? Of course. Instead of trying to figure out how large the window "decorations" are and then add that to the space you're hoping to have... which is not reliably possible... we can look at the amount of usable space we get when the page first loads, and then use JavaScript's window.resizeBy method to grow or shrink the window by the right amount.

Hey, that's not so bad! Is that all it takes? Well... almost. There are tricky boundary cases that come into play when resizing the window provides enough room to make a scrollbar unnecessary. Suddenly the usable page layout space, or "client area," is a little bigger than we wanted.

Can we fix that too? Yes, by resizing one more time. We perform the very same check of the amount of usable space, and we grow or shrink as needed. And that second resize finishes the job.

Unfortunately, the Opera browser doesn't provide any reliable way to obtain the usable "client area" without the space potentially consumed by a scrollbar. So my code contains a small "fudge factor" for Opera which will work well for most layouts. All other major browsers get the precise size you want!
Another problem is that determining the size of the current "client area" is actually quite difficult in every browser except Internet Explorer. While Internet Explorer lets us do it easily by checking document.documentElement.clientWidth and clientHeight, Firefox and Safari both require that we create a special hidden div element that fills the client area and check the visible size of that div. I explain this in detail in the article "how large is the usable part of the browser window?"

Implementing a Window With a Self-Adjusting Size

Here's the HTML source for a page that adjusts its size to match the "client area" (really useful layout space) you want, and a link to download the resizing_window.js JavaScript code that the page requires. When code is shorter I present it right in the article, but there's quite a bit of JavaScript because of the need to determine things in different ways in different browsers. Hopefully CSS will one day provide a simple, reliable and well-thought-out way to specify the window size, as well as the size of things inside it. But for now it takes a little bit of work to get things right.

Instructions:

1. download resizing_window.js (provided in a zip file).

2. Upload resizing_window.js to your own website. Put it in the same folder with your page. You could also put it in a scripts folder and use an absolute URL in the script element below to always fetch it from the same place.

3. Create your page by following this template:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YOUR TITLE GOES HERE</title>
<script src="resizing_window.js">
</script>
</head>
<body onLoad="resizingWindowLoaded(YOUR WIDTH, YOUR HEIGHT)"
  onResize="resizingWindowResized()">
YOUR CONTENT GOES HERE
<script>
resizingWindowEndOfBody();
</script>
</body>
</html>

All of the things you need to change are capitalized for your convenience. Replace YOUR WIDTH and YOUR HEIGHT with the width and height in pixels that your layout requires.

That's all there is to it!

Already have a page design? Don't wish to start from a template? Just follow the detailed instructions provided at the top of resizing_window.js. It's simple to add this feature to your own page.

Note the onLoad and onResize handlers. If you need other handlers for these as well, just insert my calls first, followed by semicolons. You can call more than one function from a single event handler.

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!