Start Working With Browser Windows in JavaScript
(Page 1 of 5 )
This series of articles mainly concentrates on working with browser windows and their sub-windows in JavaScript. You can reuse these scripts to inject into server side controls easily (especially in .NET and Java).
All of the examples in this series can be directly tested by copying and pasting the entire code (of each section) into any text file with the extension .HTM and opening it using a browser.
How to resize the current browser window using JavaScript
I already contributed a few articles on JavaScript to this website. If you are new to JavaScript, I suggest you take a look at them before proceeding further.
Now, let us try to develop a simple script (JavaScript) to resize the current browser window. Take a look at the following code:
<html>
<head>
<meta name=vs_targetSchema
content="http://schemas.microsoft.com/intellisense/ie5">
<script id="clientEventHandlersJS" language="javascript">
<!--
function Apply(w,h)
{
window.resizeTo(w,h); //To resize the window to a specific pixel
size
//window.resizeBy(w,h); //To increase or decrease the size of the
window by a fixed pixel amount,
}
function Button1_onclick() {
var w = document.all("txtWidth").value;
var h = document.all("txtHeight").value;
Apply(w,h);
}
//-->
</script>
</head>
<body>
<form id="form1">
Enter width:<input type="text" id="txtWidth"
NAME="txtWidth" value="400"><br>
Enter height:<input type="text" id="txtHeight"
NAME="txtHeight" value="200"><br>
<input type="button" value="Show" id="Button1"
name="Button1" onclick="return Button1_onclick()">
</form>
</body>
</html>
Actually, within the above code, the “meta” tag is not necessary. Because I developed the above code using Visual Studio.NET 2003 Enterprise Architect, it was automatically added to provide its full-featured mechanisms. The explanation for the above code is discussed in the next section.
Within the above code, I managed to create two textboxes named “txtWidth” and “txtHeight” and a button named “Button1.” When the button (button1) is clicked, the control goes to the function “Button1_onclick.” This function mainly captures the values (width and height) given by the user and finally calls another function, “Apply” (along with passing those values).
The function “Apply” mainly contains the following statement:
window.resizeTo(w,h); //To resize the window to a specific pixel
The “window” is a built-in object in JavaScript which contains a method, “resizeTo.” The method accepts two parameters, width and height. The method automatically resizes the window to the specified width and height. The above statement resizes the current browser window (on which your web page is displayed) to the width and height values you specified within the textboxes. Let us consider another alternative:
window.resizeBy(w,h);//To increase or decrease the size of the
window by a fixed pixel amount,
The “window” object contains another method, “resizeBy,” which also resizes the current browser window. The only difference between “resizeTo” and “resizeBy” is that the first one resizes the window to specific pixels and the latter resizes by increasing or decreasing the size mentioned.
Next: How to move the current browser window using JavaScript >>
More JavaScript Articles
More By Jagadish Chaterjee
/ 12 
