moveby JavaScript object to move window from its current location by horizontally and vertically

Using JavaScript moveBy() property we can shift the window from its current locations. Here is the code

moveBy(x,y);

Here x is number of pixel in horizontal direction and y is in vertical direction.

Moving window linked to a button

To know more on this we will check this demo. Here we have used one button to open one small child window. Another button is kept to close this window. The third button is to move the window by 10 x 10 pixel from its current position.
DEMO of moveBy()
Here is the code.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Demo of moveBy to move a window</title>
<script language=javascript>

function to_close(){
tm.close();
}

function to_open(){
tm=window.open("moveby-child.htm","Ratting","width=250,height=150,0,top=200,status=0,");
}


function to_moveBy(){
tm.moveBy(10,10);
tm.focus();   // Keeping the focus on small window
}

</script>
</head>

<body>
<input type="button" name="btn" value="Open" onclick="to_open()";>
<input type="button" name="btn" value="Close" onclick="to_close()";>
<input type="button" name="btn" value="Move By" onclick="to_moveBy()";>
</body>

</html>

Here is the code for the small child window moveby-child.htm

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title>Demo of moveby child window</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
This is child window
<br>
You can move this widow by pressing the move by button

</body>
</html>

Moving the window in different direction

After learning how to use moveBy object to shift a small window we will try to learn to develop a page with different buttons to move window in all four directions.
DEMO with direction buttons
Here is the source code

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Demo of moveBy to move a window in diferent directions</title>
<script language=javascript>

function to_close(){
tm.close();
}

function to_open(){
tm=window.open("moveby-child.htm","Ratting","width=250,height=150,0,top=200,status=0,");
}


function to_moveBy(text){
switch (text) // Passing the variable to switch condition
{
case "right": 
tm.moveBy(10,0);
tm.focus();   // Keeping the focus on small window
break;

case "left": 
tm.moveBy(-10,0);
tm.focus();  
break;

case "up": 
tm.moveBy(0,-10);
tm.focus();  
break;

case "down": 
tm.moveBy(0,10);
tm.focus();  
break;

default:
alert ("No action is selected");
break;
}
}
</script>
</head>

<body>
<input type="button" name="btn" value="Open" onclick="to_open()";>
<input type="button" name="btn" value="Close" onclick="to_close()";><br>

<input type="button" name="btn" value="< Move  " onclick="to_moveBy('left')";>
<input type="button" name="btn" value="Move > " onclick="to_moveBy('right')";><br>
<input type="button" name="btn" value="Move ^ " onclick="to_moveBy('up')";>
<input type="button" name="btn" value="Move V " onclick="to_moveBy('down')";>

</body>
</html>

Window MoveTo
Window Object Bookmark a page Redirect Page

Subscribe to our YouTube Channel here

window.moveBy()

Moving window linked to a button

Moving the window in different direction

Subscribe