window.moveBy(): Move a Window Relative to Its Current Position
window.moveBy() requests that a browser window move by a number of CSS pixels relative to its current position. Positive X moves right, negative X moves left; positive Y moves down, negative Y moves up.
window.moveBy(deltaX, deltaY);
For example, moveBy(10, 10) requests a move 10 pixels right and 10 pixels down.
On this page
Moving a child window from its current position Top ↑
The original three-button demo is preserved: open the child window, close it, or request a 10 × 10 pixel move from its current position.
Complete source for the moveBy() demo Top ↑
This is the complete working page source, with the JavaScript included, so it can be copied as one file.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo of moveBy() to move a child window</title>
</head>
<body>
<button type="button" id="openBtn">Open</button>
<button type="button" id="closeBtn">Close</button>
<button type="button" id="moveBtn">Move By</button>
<p id="demoStatus" aria-live="polite"></p>
<script>
let tm = null;
function showStatus(message) {
document.getElementById("demoStatus").textContent = message;
}
function to_open() {
tm = window.open(
"moveby-child.htm",
"Ratting",
"width=250,height=150,left=150,top=200,status=0,resizable=yes"
);
showStatus(tm ? "Child window opened." : "Popup blocked. Allow popups and try again.");
}
function to_close() {
if (tm && !tm.closed) {
tm.close();
showStatus("Close requested for the child window.");
} else {
showStatus("Open the child window first.");
}
}
function to_moveBy() {
if (!tm || tm.closed) {
showStatus("Open the child window first.");
return;
}
tm.moveBy(10, 10);
tm.focus();
showStatus("Requested a move of 10px right and 10px down.");
}
document.getElementById("openBtn").addEventListener("click", to_open);
document.getElementById("closeBtn").addEventListener("click", to_close);
document.getElementById("moveBtn").addEventListener("click", to_moveBy);
</script>
</body>
</html>
Child window: moveby-child.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo of moveBy child window</title>
</head>
<body>
<p>This is the child window.</p>
<p id="my_msg" aria-live="polite">Wait for focus status here.</p>
<script>
const message = document.getElementById("my_msg");
function displayFocusStatus() {
const focused = document.hasFocus();
message.style.backgroundColor = focused ? "#00f000" : "#f07814";
message.textContent = focused
? "This document is in focus."
: "This document is not in focus.";
}
displayFocusStatus();
setInterval(displayFocusStatus, 1000);
</script>
</body>
</html>
Moving the child window in four directions Top ↑
The original directional demo is also retained. Each button changes only one axis by 10 pixels.
Complete working source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo of moveBy() in different directions</title>
</head>
<body>
<button type="button" id="openBtn">Open</button>
<button type="button" id="closeBtn">Close</button><br>
<button type="button" data-direction="left">< Move</button>
<button type="button" data-direction="right">Move ></button><br>
<button type="button" data-direction="up">Move ^</button>
<button type="button" data-direction="down">Move V</button>
<p id="demoStatus" aria-live="polite"></p>
<script>
let tm = null;
function showStatus(message) {
document.getElementById("demoStatus").textContent = message;
}
function to_open() {
tm = window.open(
"moveby-child.htm",
"Ratting",
"width=250,height=150,left=150,top=200,status=0,resizable=yes"
);
showStatus(tm ? "Child window opened." : "Popup blocked. Allow popups and try again.");
}
function to_close() {
if (tm && !tm.closed) tm.close();
}
function to_moveBy(direction) {
if (!tm || tm.closed) {
showStatus("Open the child window first.");
return;
}
switch (direction) {
case "right":
tm.moveBy(10, 0);
break;
case "left":
tm.moveBy(-10, 0);
break;
case "up":
tm.moveBy(0, -10);
break;
case "down":
tm.moveBy(0, 10);
break;
default:
showStatus("No direction was selected.");
return;
}
tm.focus();
}
document.getElementById("openBtn").addEventListener("click", to_open);
document.getElementById("closeBtn").addEventListener("click", to_close);
document.querySelectorAll("[data-direction]").forEach((button) => {
button.addEventListener("click", () => to_moveBy(button.dataset.direction));
});
</script>
</body>
</html>
Browser limitations Top ↑
window.open(). A popup with multiple tabs cannot normally be moved, and some desktop environments and mobile browsers may ignore movement requests entirely.For normal page layout, do not use moveBy(). Position elements with CSS. Window movement is mainly relevant to controlled popup-window demonstrations or specialized desktop-style web workflows.
Window Object Bookmark a page Redirect Page
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
