In this section, we will learn what the Window moveTo() method is and how to use in JavaScript.
JavaScript Window Position: Window moveTo() Method
With the help of moveTo() method, we can change the position of a browser window from one location to another.
Notes:
- The value (0, 0) means top left corner of the screen.
- Also, by default, the browsers might disable the ability to move 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 move the created window.
Window moveTo() Method Syntax:
window.moveTo(x, y)
Window moveTo() Method Parameter:
The method takes two arguments:
- The first argument declares how many CSS pixels the window should move horizontally toward left or right side of the screen. If the value we set here is a negative value, the window will be moved towards the left side of the screen. But if the value is positive, the window will be moved toward the right side of the screen.
- The second argument specifies how many CSS pixels the window should move vertically. If we set a negative value, that means the location of the window is toward upside of the screen. But if the value is positive, it means the window’s location is toward downside of the screen.
Window moveTo() Method Return Value:
No return value.
Example: using Window moveTo() 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 win = window.open(String.raw`F:\jScript-Work-Station\example.html`,
"window",
"height=400,width=400,top=10,left=10,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 we do this is that the `moveTo()` 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 `moveTo()` method call.
Now create another HTML file 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 = 10, y = 10;
setInterval(()=>moveTo(x++,y++),100);
</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 move from top left corner of the screen to the bottom right side of the screen with 100 milliseconds delay in between.
Note: if you’re not familiar with the `setTimeout` and `setInterval` functions, please refer to the related sections.
