window.moveBy()

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


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer