Moiz Saifuddin
asked on
Move control
How can i move a control up or down or on an (x,y)-axis on my page using javascript..
Moiz
Moiz
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
pixelLeft and pixelTop are IE only.
offsetLeft and offsetTop are cross-browser, but not what you want to update. For styled element what yo want to update are the style properties and you have to inclue the unit of measure to be standards compliant:
function resetPosBy(obj,x,y)
{
newx = obj.offsetLeft+x;
newy = obj.offsetTop+y;
obj.style.left=newx+'px';
obj.style.top=newy+'px';
}
and you can fir it from any event:
onclick="resetPosBy('xxx',
Cd&
offsetLeft and offsetTop are cross-browser, but not what you want to update. For styled element what yo want to update are the style properties and you have to inclue the unit of measure to be standards compliant:
function resetPosBy(obj,x,y)
{
newx = obj.offsetLeft+x;
newy = obj.offsetTop+y;
obj.style.left=newx+'px';
obj.style.top=newy+'px';
}
and you can fir it from any event:
onclick="resetPosBy('xxx',
Cd&
speaking of cross-browser, the code I provided above was suppose to be good for IE only and here's the cross-browser version
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="Javascript">
var m=false, offX, offY, y, x;
function Mc_move(e){
x=e.clientX;
y=e.clientY;
if(m){
document.images["loader"].
document.images["loader"].
return true;
}
return true;
}
function Mc_down(e){
m=true;
if(m){
offX=x-document.images["lo
offY=y-document.images["lo
return false;
}
return true
}
function Mc_up(e){
if(m){
m=false;
return false;
}
return true;
}
</script>
</head>
<body onmousemove="Mc_move(event
<img src="http://gladstone.uoregon.edu/~reubanks/Cars%20&%20Bikes/Bugatti%20Veyron.jpg" width="350" height="250" name="loader" onmousedown="Mc_down(event
</body>
</html>
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="Javascript">
var m=false, offX, offY, y, x;
function Mc_move(e){
x=e.clientX;
y=e.clientY;
if(m){
document.images["loader"].
document.images["loader"].
return true;
}
return true;
}
function Mc_down(e){
m=true;
if(m){
offX=x-document.images["lo
offY=y-document.images["lo
return false;
}
return true
}
function Mc_up(e){
if(m){
m=false;
return false;
}
return true;
}
</script>
</head>
<body onmousemove="Mc_move(event
<img src="http://gladstone.uoregon.edu/~reubanks/Cars%20&%20Bikes/Bugatti%20Veyron.jpg" width="350" height="250" name="loader" onmousedown="Mc_down(event
</body>
</html>
> you have to inclue the unit of measure to be standards compliant...
good to keep in mind but not necessary
good to keep in mind but not necessary
Moiz, any luck so far?
ASKER
yes, i tried archarians solution, worked for me...
<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="Javascript">
var m=false;
function Mc_move(){
if(m){
document.images["loader"].
document.images["loader"].
return false
}
return true
}
function Mc_down(){
if(!m){
m=true;
offX=event.clientX-documen
offY=event.clientY-documen
return false
}
return true
}
function Mc_up(){
if(m){
m=false;
x=document.images["loader"
y=document.images["loader"
return false
}
return true
}
</script>
</head>
<body onmousemove="Mc_move()" onmouseup="m=false;" oncontextmenu="return true" ondragstart="return false">
<img src="http://gladstone.uoregon.edu/~reubanks/Cars%20&%20Bikes/Bugatti%20Veyron.jpg" width="350" height="250" name="loader" onmousedown="Mc_down()" onmouseup="Mc_up()" style="position:absolute;l
</body>
</html>