Posted By
Bajarangi soft ,
Posted On 01-10-2020
The resizeBy() method resizes a window by the specified amount, relative to its current size.
Note: This method moves the bottom right corner of the window by the specified number of pixels defined. The top left corner will not be moved (it stays in its original coordinates).
Related methods:
resizeBy(width, height)
Parameter Values
Parameter Type Description width Number Required. A positive or a negative number that specifies how many pixels to resize the width by height Number Required. A positive or a negative number that specifies how many pixels to resize the height by
Example(1)
<button class="btn btn-success" onclick="openWin()">Create window</button>
<button class="btn btn-success" onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeBy(250, 250);
myWindow.focus();
}
</script>
In above example when you click create window button and when you click resize window button
Example(2)
<button class="btn btn-success" onclick="openWin()">Create window</button>
<button class="btn btn-success" onclick="resizeWinTo()">Resize the window to 800px * 600px</button>
<button class="btn btn-success" onclick="resizeWinBy()">Make the new window smaller</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=250, height=250");
}
function resizeWinTo() {
myWindow.resizeTo(800, 600);
myWindow.focus();
}
function resizeWinBy() {
myWindow.resizeBy(-100, -50);
myWindow.focus();
}
</script>
In above example when you click create window button and when you click resize window button.
Complete Code For Window ResizeBy Method With JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Use Window ResizeBy Methods With JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>Use Window ResizeBy Methods With JavaScript</h1>
</div>
<br>
<div class="well">
<button class="btn btn-success" onclick="openWin()">Create window</button>
<button class="btn btn-success" onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeBy(250, 250);
myWindow.focus();
}
</script>
</div>
</body>
</html>