In this section, we will learn what the window resizeTo() method is and how to use it.
JavaScript Window resizeTo() Method
If we want to programmatically change the size (width and height) of a browser window, we can use the resizeTo() method.
Basically, this method takes two arguments that declare the width and height of the current browser window.
Window resizeTo() Method Syntax:
window.resizeTo(width, height)
Window resizeTo() Method Parameter:
This method takes two arguments:
- The first argument declares how many CSS pixels the width of the window should be.
- The second argument specifies the height of the window again in CSS pixels.
Notes:
- By default, the browsers might disable the ability to resize a browser window and so you might not be able to see a result from calling the method.
- Usually when we create a new window from calling the `open()` method, we’re able to resize the created window.
Window resizeTo() Method Return Value:
This method does not return a value.
Example: using Window resizeTo() method in JavaScript
If you want to create this example on your own, then first create a file named `test.html` and put the code below in there:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Output:</h3>
<p id = "link"></p>
<script>
let winx = window.open(String.raw`G:\hack\javascript\my-javascript-tutorial-article-based\224-JavaScript window resizeTo()\example.html`,
"window",
"height=200,width=200,top=30,left=30,resizable=yes");
</script>
</body>
</html>
The call to the `open()` method is explained in later sections, but for now, you should know that this method will pop up a new window to load the address that we specify for it. The reason that we do this is that the `resizeTo()` method by default won’t work on the main window that the webpage opens with. But if on that page we open another page via this method, the second one reacts to the `resizeTo()` method call.
Now create another HTML file named `example` and put the code below in there:
<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var x = 100, y = 100;
setTimeout(()=>{
setInterval(()=>resizeTo(x++,y++),150);
},2000);
</script>
</body>
</html>
This is the content of the window that we opened via the call to the `open()` method.
Note: make sure the location of this file matches the first argument to the `open()` method.
Now if we run the program, the new window will start to resize with 150 milliseconds delay in between.
Note: if you’re not familiar with the `setTimeout` and `setInterval` functions, please refer to the related sections.
There’s another method that works pretty much the same as this one and is named `resizeBy()`. We will cover this one in the resizeBy section.
