• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

Move control

How can i move a control up or down or on an (x,y)-axis on my page using javascript..




Moiz
0
Moizsaif123
Asked:
Moizsaif123
1 Solution
 
archrajanCommented:
<html>
<head>
<script>
function moveTextBox()
{
     var objTextbox = document.getElementById("theText");
     objTextbox.style.pixelTop += 20;
}
</script>
</head>

<body>

<form id="Form1" method="post" runat="server">
<INPUT style="Z-INDEX: 101; LEFT: 243px; POSITION: absolute; TOP: 222px" type="button" value="Move Down" onClick="moveTextBox()" runat="server">
<INPUT style="Z-INDEX: 102; LEFT: 166px; POSITION: absolute; TOP: 98px" id="theText" type="text">
</form>

</body>
</html>
0
 
davidlars99Commented:
you mean move along with the mouse?

<html>
<head>
<meta http-equiv="imagetoolbar" content="no">

<script language="Javascript">

var m=false;
function Mc_move(){
   if(m){
       document.images["loader"].style.left=event.clientX-offX;
       document.images["loader"].style.top=event.clientY-offY;
       return false
   }
   return true
}
function Mc_down(){
   if(!m){
      m=true;
      offX=event.clientX-document.images["loader"].offsetLeft;
      offY=event.clientY-document.images["loader"].offsetTop;
      return false
   }
   return true
}
function Mc_up(){
   if(m){
      m=false;
      x=document.images["loader"].offsetLeft;
      y=document.images["loader"].offsetTop;
      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;left:20px;filter:progid:DXImageTransform.Microsoft.Shadow(color='#444444', Direction=135, Strength=6) alpha(opacity=94); -moz-opacity:0.9;;cursor:pointer">

</body>
</html>
0
 
COBOLdinosaurCommented:
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',20,-50)"

Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
davidlars99Commented:
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"].style.left=(x-offX)+"px";
       document.images["loader"].style.top=(y-offY)+"px";
       return true;
   }
   return true;
}
function Mc_down(e){
      m=true;
   if(m){
      offX=x-document.images["loader"].offsetLeft;
      offY=y-document.images["loader"].offsetTop;
      return false;
   }
   return true
}
function Mc_up(e){
   if(m){
      m=false;
      return false;
   }
   return true;
}

</script>
</head>
<body onmousemove="Mc_move(event)" oncontextmenu="return true" onselectstart="return false" 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(event)"  onmouseup="Mc_up(event)" style="position:absolute;left:20px;filter:progid:DXImageTransform.Microsoft.Shadow(color='#444444', Direction=135, Strength=6) alpha(opacity=94); -moz-opacity:0.9;;cursor:pointer">

</body>
</html>
0
 
davidlars99Commented:
>  you have to inclue the unit of measure to be standards compliant...

good to keep in mind but not necessary
0
 
davidlars99Commented:
Moiz, any luck so far?
0
 
Moizsaif123Author Commented:
yes, i tried archarians solution, worked for me...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now