CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.
Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS
-Free applets
-Web Tutorials
-Link to Us!
- JavaScript Menus
- PHP Resources
- Hotels & Vacations
- Java Online Casinos
- Web hosting Search
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(x,y) | Resizes a window by the specified amount in pixels |
| resizeTo(x,y) | Resizes a window to the specified pixel values |
Note that in NS 4, 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>
function full_screen(){
window.moveTo(0,0)
window.resizeTo(screen.width,screen.height)
}
</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:
<script>
<!--
<!--Animated Window Opener script-By JavaScript Kit (javascriptkit.com) More scripts here-->
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>
Nothing in the above code should come as outrageously alienatic (is there such as word?) to you, so I'll leave it at that.
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
-The new window methods
-Moving a window
-Scrolling a window
-Resizing a window