I need this easy script ! Please help!

**enrique** · 09-10-2012 04:59 AM

hello
I want to make a page with three buttons inside.two buttons values are '+' and '-',and the other is 'submit' button.
I want use + and - buttons to move submit button.it means when you click on + ,the X parameter in submit button style increases 1px.and by clicking on - it will decrease 1px.
the same must be happened for Y parameter.
I need this for positioning submit button in the page.
Can anyone help??? i know this is easy!

**vwphillips** · 09-10-2012 05:57 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Move(id,mde,ud){
 var obj=document.getElementById(id);
 obj.style.position=obj.style.position||'relative';
 obj.style[mde]=(isFinite(parseInt(obj.style[mde]))?parseInt(obj.style[mde]):0)+ud+'px';
}

/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="X+" onmouseup="Move('tst','left',5);"/>
<input type="button" name="" value="X-" onmouseup="Move('tst','left',-5);" />
<input type="button" name="" value="Y+" onmouseup="Move('tst','top',5);"/>
<input type="button" name="" value="Y-" onmouseup="Move('tst','top',-5);" />
<input type="button" name="" value="button" id="tst" />
</body>

</html>

**enrique** · 09-11-2012 01:48 AM

Oh! thank you vwphillips it works perfectly! this is what i want

But another thing...

I want when a user clicks on + & - buttons and HOLD mouse button down ,submit button moves Continuously

Ty again.

**vwphillips** · 09-11-2012 04:00 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Move(id,mde,ud){
 clearTimeout(Move[id]);
 var obj=document.getElementById(id);
 if (obj&&(mde=='left'||mde=='top')&&typeof(ud)=='number'){
  obj.style.position=obj.style.position||'relative';
  obj.style[mde]=(isFinite(parseInt(obj.style[mde]))?parseInt(obj.style[mde]):0)+ud+'px';
  Move[id]=setTimeout(function(){ Move(id,mde,ud); },100);
 }
}

/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="X+" onmousedown="Move('tst','left',5);" onmouseup="Move('tst');" onmouseout="Move('tst');"/>
<input type="button" name="" value="X-" onmousedown="Move('tst','left',-5);" onmouseup="Move('tst');" onmouseout="Move('tst');" />
<input type="button" name="" value="Y+" onmousedown="Move('tst','top',5);" onmouseup="Move('tst');" onmouseout="Move('tst');"/>
<input type="button" name="" value="Y-" onmousedown="Move('tst','top',-5);" onmouseup="Move('tst');" onmouseout="Move('tst');" />
<input type="button" name="" value="button" id="tst" />
</body>

</html>

**enrique** · 09-13-2012 12:59 AM

Great! it's done
Now let me explain what i really suppose to do
With the code above the user can set the position of submit button.when it was seted user clicks on submit button and it send itself position to a specific php file like www.example.com/pos.php
(ex. left:542 top:396)
I know the second part is more complex

**vwphillips** · 09-13-2012 05:19 AM

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Move(id,mde,ud){
 clearTimeout(Move[id]);
 var obj=document.getElementById(id);
 if (obj&&(mde=='left'||mde=='top')&&typeof(ud)=='number'){
  obj.style.position=obj.style.position||'relative';
  obj.style[mde]=(isFinite(parseInt(obj.style[mde]))?parseInt(obj.style[mde]):0)+ud+'px';
  if (document.getElementById(mde)){
   document.getElementById(mde).value=obj.style[mde];
  }
  Move[id]=setTimeout(function(){ Move(id,mde,ud); },100);
 }
}

/*]]>*/
</script>
</head>

<body>
<input type="button" name="" value="X+" onmousedown="Move('tst','left',5);" onmouseup="Move('tst');" onmouseout="Move('tst');"/>
<input type="button" name="" value="X-" onmousedown="Move('tst','left',-5);" onmouseup="Move('tst');" onmouseout="Move('tst');" />
<input type="button" name="" value="Y+" onmousedown="Move('tst','top',5);" onmouseup="Move('tst');" onmouseout="Move('tst');"/>
<input type="button" name="" value="Y-" onmousedown="Move('tst','top',-5);" onmouseup="Move('tst');" onmouseout="Move('tst');" />
<input name="left" id="left" />
<input name="top" id="top" />
<input type="button" name="" value="button" id="tst" />
</body>

</html>

**enrique** · 09-15-2012 12:31 AM

Thank you vwphilips!
You are a great coder...That was what i need

Thread: I need this easy script ! Please help!

Thread Tools

Display

I need this easy script ! Please help!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions