Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Window resizeBy() Method
The HTML Window resizeBy() method resizes a window by a specified amount relative to its current dimensions. This method adjusts the window's width and height by adding the provided pixel values to the current size.
Syntax
Following is the syntax for the Window resizeBy() method −
window.resizeBy(width, height)
Parameters
The resizeBy() method accepts the following parameters −
width − An integer representing the number of pixels to resize the window width. Positive values increase the width, negative values decrease it.
height − An integer representing the number of pixels to resize the window height. Positive values increase the height, negative values decrease it.
Return Value
The resizeBy() method does not return any value. It directly modifies the window dimensions.
Example - Basic Window Resize
Following example demonstrates how to use the resizeBy() method to resize a new window −
<!DOCTYPE html>
<html>
<head>
<title>Window resizeBy() Method</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f4f4f4;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn:hover {
background: #0056b3;
}
</style>
</head>
<body>
<h1>Window resizeBy() Method Demo</h1>
<button onclick="createWindow()" class="btn">Create New Window</button>
<button onclick="enlargeWindow()" class="btn">Enlarge Window</button>
<button onclick="shrinkWindow()" class="btn">Shrink Window</button>
<script>
var newWindow;
function createWindow() {
newWindow = window.open('', '', 'width=300,height=200');
newWindow.document.write('<h3>Resizable Window</h3><p>Current size: 300x200</p>');
}
function enlargeWindow() {
if (newWindow && !newWindow.closed) {
newWindow.resizeBy(100, 50);
newWindow.focus();
} else {
alert('Please create a window first');
}
}
function shrinkWindow() {
if (newWindow && !newWindow.closed) {
newWindow.resizeBy(-50, -30);
newWindow.focus();
} else {
alert('Please create a window first');
}
}
</script>
</body>
</html>
The example creates a new window with initial dimensions of 300x200 pixels. The "Enlarge Window" button increases the size by 100x50 pixels, while "Shrink Window" decreases it by 50x30 pixels.
Example - Multiple Resize Operations
Following example shows how to perform multiple resize operations with different values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Resize Operations</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
.controls {
text-align: center;
margin: 20px 0;
}
.btn {
background: #28a745;
color: white;
border: none;
padding: 8px 16px;
margin: 3px;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Window Resize Controls</h2>
<div class="controls">
<button onclick="openTestWindow()" class="btn">Open Test Window</button><br><br>
<button onclick="resizeWindow(50, 0)" class="btn">Wider (+50px)</button>
<button onclick="resizeWindow(-50, 0)" class="btn">Narrower (-50px)</button>
<button onclick="resizeWindow(0, 40)" class="btn">Taller (+40px)</button>
<button onclick="resizeWindow(0, -40)" class="btn">Shorter (-40px)</button>
</div>
<script>
var testWindow;
function openTestWindow() {
testWindow = window.open('', 'testWin', 'width=400,height=300');
testWindow.document.write(`
<html>
<body style="font-family: Arial; padding: 20px; text-align: center;">
<h3>Test Window</h3>
<p>This window can be resized using the controls in the parent window.</p>
<p id="size">Initial size: 400x300</p>
</body>
</html>
`);
}
function resizeWindow(widthChange, heightChange) {
if (testWindow && !testWindow.closed) {
testWindow.resizeBy(widthChange, heightChange);
testWindow.focus();
} else {
alert('Please open the test window first');
}
}
</script>
</body>
</html>
This example provides individual controls for resizing width and height independently, demonstrating how positive and negative values affect window dimensions.
Browser Compatibility
The resizeBy() method is supported by all major browsers, but there are some important considerations −
Most modern browsers block automatic window resizing for security reasons unless the window was opened by JavaScript.
The method only works on windows created using
window.open().Some browsers may ignore resize requests if they would make the window too small or too large.
Pop-up blockers may prevent window creation and resizing operations.
Key Points
The resizeBy() method changes window size relative to current dimensions, while resizeTo() sets absolute dimensions.
Always check if the window exists and is not closed before calling resizeBy().
Use positive values to increase size and negative values to decrease size.
The method works only on windows opened by JavaScript, not on the main browser window.
Conclusion
The Window resizeBy() method provides a way to dynamically adjust window dimensions by relative amounts. It is particularly useful for creating interactive window controls in web applications, though it should be used judiciously due to browser security restrictions and user experience considerations.
175 Views
