Getting to Learn Window Objects in JavaScript – Resizing Windows with resizeTo() and resizeBy()

Guest Posts Paolo Nikko Nuñal

Another common practice by many developers is re-sizing windows. If you want to set a specific size of the window during events, then you can do so by using the resizeBy() and resizeTo() methods.

The first we are going to tackle about is the resizeBy() method in which it re-sizes a window to a specified amount that is relative to the current size. As note, the top right corner of the window will not be moved only the bottom right corner.

Syntax:

resizeBy([WIDTH],[HEIGHT])

WIDTH - (REQUIRED) Any integer that will be used to specify the amount of pixels in width.

HEIGHT - (REQUIRED) Any integer that will be used to specify the amount of pixels in height.

Code


<html>
<body>
<button onclick="openWindow()">Create Blank Window</button>
<button onclick="resizeWindow()">Resize</button>
<script>
    var blankWindow ;
    var openWindow = function(){
       blankWindow = window.open("","", "width=150,height=150");
    }
    var resizeWindow = function(){ 
       blankWindow.resizeBy(300,300);
       blankWindow.focus();
    }
</script>
</body>
</html>


The next one would be the resizeTo() method which is similar to the resizeBy() method. The only difference is that this method re-sizes the window to the specified width and height of your choosing.

Syntax:

resizeTo([WIDTH],[HEIGHT])

WIDTH - (REQUIRED) Any integer that will be used to specify the amount of pixels in width.

HEIGHT - (REQUIRED) Any integer that will be used to specify the amount of pixels in height.

Code


<html>
<body>
<button onclick="openWindow()">Create Blank Window</button>
<button onclick="resizeWindow()">Resize</button>
<script>
    var blankWindow ;
    var openWindow = function(){
       blankWindow = window.open("","", "width=150,height=150");
    }
    var resizeWindow = function(){ 
       blankWindow.resizeTo(300,300);
       blankWindow.focus();
    }
</script>
</body>
</html>



You can use these two methods to manipulate your window if you prefer a specified size during an event in which it will create a new window.