Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

Resizing a window

Same concept again, different action again. The new resizeBy() and resizeBy() methods of JavaScript1.2 allow you to programmatically resize the window. Here are the methods to accomplishing this:

Methods Description
resizeBy(dx, dy) Resizes a window by the specified amount in pixels
resizeTo(x y) Resizes a window to the specified pixel values

Note that in most browsers, resizing a window to below 100 by 100 in pixels require permission using signed script (for security reasons). Let's cut straight to the chase now, and show some examples using them.

Example #1: Resizing the window to fit the entire screen

Here's a rather useful script that resizes the current window to fit the entire screen:

<script type="text/javascript">
function full_screen(){
window.moveTo(0,0)
window.resizeTo(screen.width,screen.height-30)
}
</script>

<form>
<input type="button" onClick="full_screen()" value="Full Screen!">
</form>

Note the moveTo() above, which first moves the window to the upper left corner of the screen before resizing...

Example #2: Animated window opener

One of the scripts found in the JavaScript Kit script archive demonstrates quite well how you may use the resize methods to create interesting window effects. Check out the effect, then the source:

Open window

<script type="text/javascript">
<!--
var mylocation="../index.shtml"
var winheight=100
var winsize=100
var x=5

function go(){
win2=window.open("","","scrollbars")
if (!document.layers&&!document.all){
win2.location=mylocation
return
}
win2.resizeTo(100,100)
win2.moveTo(0,0)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=mylocation
winheight=100
winsize=100
x=5
return
}
setTimeout("go2()",50)
}
//-->
</script>
<a href="javascript:go()" onMouseover="window.status='open window';return true" onMouseout="window.status=''" >Open window</a>

And with that I also end this tutorial. Just one word of advice- as useful as these newly learned JavaScript methods can be, don't give them too much control over your page...manual is often times still the most practical!

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.