www.webdeveloper.com
Results 1 to 7 of 7

Thread: I need this easy script ! Please help!

  1. #1
    Join Date
    Sep 2012
    Posts
    12

    Exclamation I need this easy script ! Please help!

    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!

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2012
    Posts
    12
    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Sep 2012
    Posts
    12
    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

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Sep 2012
    Posts
    12
    Thank you vwphilips!
    You are a great coder...That was what i need

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles