?
Solved

Move control

Posted on 2005-05-09
7
Medium Priority
?
240 Views
Last Modified: 2012-06-27
How can i move a control up or down or on an (x,y)-axis on my page using javascript..




Moiz
0
Comment
Question by:Moizsaif123
7 Comments
 
LVL 25

Accepted Solution

by:
archrajan earned 400 total points
ID: 13961144
<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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13961198
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13961490
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 13

Expert Comment

by:davidlars99
ID: 13961624
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 13961669
>  you have to inclue the unit of measure to be standards compliant...

good to keep in mind but not necessary
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13973482
Moiz, any luck so far?
0
 
LVL 4

Author Comment

by:Moizsaif123
ID: 13980997
yes, i tried archarians solution, worked for me...
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question