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:

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!

• Tutorial introduction
• Moving a window
• Scrolling a window
• Resizing a window