Tips: How To Exactly Resize The Window by Using resizeTo() or resizeBy() methods

Window-icon-256 We can resize the browser window by using the methods window.resizeTo( newWidth, newHeight) or window.resizeBy( DX, DY). But if you are an experienced web development, you probably know the function resizeTo() can not be always so exactly resize the window. Especially unkown the size of contents before loading in different browse.

For example, if we call window.resizeTo(500,400), the window.innerWidth ends up being 490 and the window.innerHeight, 340. The window.offsetWidth and offsetHeight don’t match the informed sizes. It will happen on some browse like Natscape and Google Chrome, but doesn’t happen on Firefox, Opera or IE.

So what can we do to exactly resize the window? The secret is window.open().  The open() method creates a new instance of a window. It loads the pageURL. The ACTION attribute of the tag and the TARGET attribute of the tag can reference the window. And this method can open the same size window even different browse. Is it simple? Hm, really simple but hope it will be helpful for someone like me.

The following is the usage of resizeBy() and resizeTo().

Function:resizeBy()

Syntax

window.resizeBy(numHort, numVert)

sample:

<html>
<head>
<script language="JavaScript1.2">
<!--
function resizeWin(dir, dist){
var myVert;
var myHorz;
if(dir == "vert"){
myHorz = 0;
myVert = dist;
}else{
myHorz = dist;
myVert = 0;
}
window.resizeBy(myHorz, myVert);
}
-->
</script>
</head>
<body>
<form>
<table border=0>
<tr>
<td><input type=BUTTON value="Expand Down" onClick="resizeWin('vert',10)"></td>
</tr>
<tr>
<td><input type=BUTTON value="Retract From Right" onClick="resizeWin('horz',-10)"></td>
<td><input type=BUTTON value="Grow Right" onClick="resizeWin('horz',10)"></td>
</tr>
<tr>
<td><input type=BUTTON value="Retrack Up" onClick="resizeWin('vert',-10)"></td>
</tr>
</table>
</form>
</body>
</html>

Function: resizeTo()

Syntax

window.resizeTo(numWidth, numHeight)

Sample:

<html>
<head>
<script language="JavaScript1.2">
<!--
function resizeWin(form){
var myWidth = form.width.value;
var myHeight = form.height.value;
window.resizeTo(myWidth, myHeight);
}
-->
</script>
</head>
<body>
<form>
<b>New Width:</b>
<input type=TEXT name="width"><br>
<b>New Height:</b>
<input type=TEXT name="height"><br>
<input type=BUTTON value="Resize Window" onClick="resizeWin(this.form)"></td>
</form>
</body>
</html>
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

One Response to “Tips: How To Exactly Resize The Window by Using resizeTo() or resizeBy() methods”

  1. Simon says:

    On an web app I’m developing have this problem, thanks your tips, it really save much time for me. Thanks!

Leave a Reply