htmlgoodies.com - Home
Use these to jump around or read it all...
Have you seen the effect yet? Some people like it, others hate the tar out of it. Here's the concept:
Today, I'm seeing a new method. Forget setting your pages to fit the user's browser, set the user's browser to fit your pages.
The code to get the effect is so simple I never thought about putting up a tutorial. I just posted it to the discussion groups or sent it back through email. Once I started sending out the code, the letters began coming back asking how to get the browser window to return to the user's previous setting once they left the page. Ah ha! I smelled a tutorial.
Resize the Window
Here's the code that resizes the window:
Take that code and put it between the <HEAD> tags on your page. You want it up that high so that the browser resizes before the rest of the page loads.
You can probably tell from the numbers that the first deals with the X, or horizontal axis. The second deals with the Y, or vertical axis.
When you use the format, only the right and bottom sides of the browser window come in. The top and left remain stationary.
My two reference books state that the resizeTo command works on Netscape Navigator browsers 4.0 and above. I also happen to know the command will work on Internet Explorer browsers 5.0. Because the command works only on some higher level browsers, you may want to use a browser detect scriptto send people using that browser to the page that contains the commands. All others should get a fixed design page.
OK! Enough description! Let's get to the look-see. When you click this link, the browser screen will resize to 300X300. I went small so all could see the effect.
Once you see the effect and say, "gosh", click back. That's where you'll find the real trick. The browser screen will resize back to your full screen settings.
Get it Back to Size
You may think that a user has to hit the BACK button for this resize script to fire. Nope. It's set to trigger using an onUnload Event Handler, so simply leaving the page gets the effect. How the user leaves doesn't matter.
Here's the script:
var width = screen.width
var height = screen.height
document.write("<BODY onUnload=window.resizeTo("+width+ "," +height+")>")
Placement of this script is important. This script will write the BODY tag to your page. See that in the document.write statement?
Here's the trick, the current screen height and screen width are grabbed when the page loads and sets to the variables "width" and "height".
Those values are then used to build another resizeTo() command. That command sits in the BODY tag and when the user leaves the page, will resize the browser back to full size.
If you have other statements inside your BODY tag, you need to make a point of putting them into the script as well.
Want more information about browser commands?
Search the Web.
In all honesty, pages that resize usually don't offer this effect. I'm sure the thinking is that the user can always click to full-size their browser.
Enjoy resizeTo() command. It's a pretty nice thing to use to resize the browser to your pages. I just wonder how your user will feel about it.
[Get it Back to Size]