HTMLGoodies
The ultimate html resource
Earthweb.com
About the Double-Underlined Links

INTRODUCTION
PRIMERS
HTML & GRAPHICS TUTORIALS
BEYOND HTML
NEED HELP?
WEB DEVELOPMENT

Become a Partner






internet.commerce















HTML Goodies : Beyond HTML : DHTML/Layers: htmlgoodies.com - Home


Web Development Daily Newsletter


Other Related Newsletters

htmlgoodies.com - Home


By Joe Burns

Use these to jump around or read it all...

[Resize the Window [Get it Back to Size]

     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.

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> 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.

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 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.
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!

 

[Resize the Window]
[Get it Back to Size]

 

Back To The HTML Goodies Home Page

Tools:
Add htmlgoodies.com to your favorites
Add htmlgoodies.com to your browser search box
IE 7 | Firefox 2.0 | Firefox 1.5.x
Receive news via our XML/RSS feed



IT Management Networking & Communications Web Development Hardware & Systems Software Development Earthwebnews.com

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers