Posted By
Bajarangi soft ,
Posted On 01-10-2020
The moveBy() method moves a window a specified number of pixels relative to its current coordinates.
Related methods:
Syntax and Usage
window.moveBy(x, y)
Parameter Values
Parameter Type Description x Number Required. A positive or negative number that specifies the amount of pixels to move the window horizontally y Number Required. A positive or negative number that specifies the amount of pixels to move the window vertically
Example(1)
<button class="btn btn-success" onclick="openWin()">Create window</button>
<button class="btn btn-success" onclick="moveWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>Name is 'myWindow'</p>");
}
function moveWin() {
myWindow.moveBy(250, 250);
myWindow.focus();
}
</script>
In above example when you click button it will open "myWindow" and move the new window 250px relative to its current position.
Example(2)
<button class="btn btn-success" onclick="openWin()">Create new window</button>
<button class="btn btn-success" onclick="moveWinTo()">Move new window</button>
<button class="btn btn-success" onclick="moveWinBy()">Move the new window by 75 * 50px</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=250, height=250");
}
function moveWinTo() {
myWindow.moveTo(150, 150);
myWindow.focus();
}
function moveWinBy() {
myWindow.moveBy(75, 50);
myWindow.focus();
}
</script>
In above example when you click create button it will create window ,when you click move new window it will move to specified place and when you click "Move the new window by 75 * 50px" button it will also move to specified place.
Complete Code For Use Window MoveBy Method With JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Use Window MoveBy Method 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: White;
}
body{
background:black
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>Use Window MoveBy Method With JavaScript</h1>
</div>
<br>
<div class="well">
<button class="btn btn-success" onclick="openWin()">Create window</button>
<button class="btn btn-success" onclick="moveWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100");
myWindow.document.write("<p>Name is 'myWindow'</p>");
}
function moveWin() {
myWindow.moveBy(250, 250);
myWindow.focus();
}
</script>
</div>
</body>
</html>