Reddit
Facebook
Twitter
del.icio.us
Digg
Slashdot
DZone
StumbleUpon
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Technorati
Windows Live
YahooBuzzhtmlgoodies.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:
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 here. 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.
<SCRIPT>
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 script to 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.
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"> 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.
Resize the Window
Here's the code that resizes the window:
window.resizeTo(600,800);
</SCRIPT>
Get it Back to Size
var width = screen.width
var height = screen.height
document.write("<BODY onUnload=window.resizeTo("+width+ "," +height+")>")
</SCRIPT>
|
TechCrawler 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.
Enjoy!
[Get it Back to Size]
Loading Comments...