JAVASCRIPT

Start Working With Browser Windows in JavaScript

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).

Author Info:

By: Jagadish Chaterjee

Poor Best

Rating:

/ 14

April 18, 2006

TABLE OF CONTENTS:

<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 >>