November 14th, 2009 
Ntt.cc 
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>
Posted in 
Tags: 
RSS Feed
Email Feed
Follow us
On an web app I’m developing have this problem, thanks your tips, it really save much time for me. Thanks!