Have you seen the effect yet? Some people like it, others hate the tar out of it. Here’s the concept:
You have a page that’s designed for a 600X800 screen size. There are multiple methods to getting that effect to display correctly on monitors set higher or lower. You could encase your page in a table cell set to 600X800. That’s called a fixed design. You could use Javascript to grab the person’s screen settings and display a page created for their screen settings. I have a tutorial on that. You could also set up a frame format set to display the 600X800 format no matter what the user’s screen settings.
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:
<SCRIPT> window.resizeTo(600,800); </SCRIPT> |
Take that code and put it between the <HEAD> flags 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 script to send people using that browser to the page that contains the commands. All others should get a fixed design page. For more information read, ”
A Bigger and Better Browser Script
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.
Take a look
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:
<SCRIPT LANGUAGE="javascript">
var width = screen.width
var height = screen.height
document.write("<BODY onUnload=window.resizeTo("+width+ "," +height+")>")
</SCRIPT>
|
Placement of this script is important. This script will write the BODY flag 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 flag and when the user leaves the page, will resize the browser back to full size.
If you have other statements inside your BODY flag, you need to make a point of putting them into the script as well.
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.
Enjoy!
