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.
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
<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.
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>
