Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    300
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Constantly rolling over button

    Hi All,

    I need to javascript a button so that when moused over and the mouse button is held down, the action constantly repeats until the mouse button is released.

    I need this to keep incrementing a value until the customers chosen value is reached when the mouse button is released. Also a decrementing button in case they go too far.

    Cheers

    Gary

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Look at this http://restyr.com/simple-javascript-jquery-timer/

    Use count up and down codes and control with the start and stop codes.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,915
    Thanks
    15
    Thanked 227 Times in 227 Posts
    Why not use mouse wheel scrolling? It's supported in all browsers, it can be used to increase or decrease, and is fairly simple to implement. I wrote a page that has eight separate functions controlled by mouse wheel, so it can be used for multiple inputs.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    And if you do use mousedown/mouseup, for heaven's sake don't drag in the entire jQuery library for something so dirt simple.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Incrementing Buttons</title>
    <style type="text/css">
    .bump { 
        background-color: transparent;
        font-size: x-large; font-weight: bold;
        cursor: pointer;
    }
    .bump:hover {
        background-color: yellow;
    }
    #counter {
        position: relative;
        width: 150px;
        text-align: center;
        font-size: xx-large;
        border: solid blue 3px;
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <div>
        <input type="button" class="bump" id="plus" value="Increase"/>
        <input type="button" class="bump" id="minus" value="Decrease"/>
    </div>
    <br/><br/>
    <div id="counter">0</div>
    <script type="text/javascript">
    (
      function( )
      {
          var ticker = null;
          var count = 0;
          var bywhat = 0;
          var curbutton = null;
          document.getElementById("plus").onmousedown = function() { bywhat=1; bumpby(this); }
          document.getElementById("plus").onmouseup = stopbump;
          document.getElementById("minus").onmousedown = function() { bywhat=-1; bumpby(this); }
          document.getElementById("minus").onmouseup = stopbump; 
    
          function bumpby(what)
          {
              if ( what != null )
              {
                  curbutton = what;          
                  curbutton.style.color = "red";
              }
              clearTimeout(ticker);
              document.getElementById("counter").innerHTML = count += bywhat;
              ticker = setTimeout(bumpby,500);
          }
          function stopbump()
          {
              if ( curbutton != null ) 
              {
                  curbutton.style.color = "black";
              }
              clearTimeout(ticker);
          }
      }
    )();
    </script>
    </body>
    </html>
    And modifying that code to provide for multiple counters, using the same code, is pretty darned easy.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    For example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Incrementing Buttons</title>
    <style type="text/css">
    .bump { 
        background-color: transparent;
        font-size: x-large; font-weight: bold;
        cursor: pointer;
    }
    .bump:hover {
        background-color: yellow;
    }
    .counter {
        position: relative;
        width: 150px;
        text-align: center;
        font-size: xx-large;
        border: solid blue 3px;
        background-color: lightblue;
    }
    </style>
    </head>
    <body>
    <div id="counter1">
        <input type="button" class="bump" name="plus" value="Increase"/>
        <input type="button" class="bump" name="minus" value="Decrease"/>
        <br/><br/>
        <div class="counter">0</div>
    </div>
    <br/><br/><br/>
    <div id="counter2">
        <input type="button" class="bump" name="plus" value="Increase"/>
        <input type="button" class="bump" name="minus" value="Decrease"/>
        <br/><br/>
        <div class="counter">0</div>
    </div>
    
    
    <script type="text/javascript">
      function Counter(div)
      {
          var ticker = null;
          var count = 0;
          var bywhat = 0;
          var curbutton = null;
          var up = div.getElementsByTagName("input")[0];
          var down = div.getElementsByTagName("input")[1];
          var msg = div.getElementsByTagName("div")[0];
          up.onmousedown = function() { bywhat=1; bumpby(this); }
          up.onmouseup = stopbump;
          down.onmousedown = function() { bywhat=-1; bumpby(this); }
          down.onmouseup = stopbump; 
    
          function bumpby(what)
          {
              if ( what != null )
              {
                  curbutton = what;          
                  curbutton.style.color = "red";
              }
              clearTimeout(ticker);
              msg.innerHTML = count += bywhat;
              ticker = setTimeout(bumpby,500);
          }
          function stopbump()
          {
              if ( curbutton != null ) 
              {
                  curbutton.style.color = "black";
              }
              clearTimeout(ticker);
          }
      }
      Counter(document.getElementById("counter1"));
      Counter(document.getElementById("counter2"));
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Or here's a fun variation:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Incrementing Buttons</title>
    <style type="text/css">
    .counter {
        position: relative;
        width: 150px; height: 40px;
        text-align: center;
        font-size: x-large; font-weight: bold;
        border: solid blue 3px;
        background-color: lightblue;
        z-index: 1;
    }
    .plus, .minus {
        position: absolute;
        width: 40px; height: 40px;
        background-color: transparent;
        z-index: 10;
        cursor: pointer;
    }
    .minus {
        left: 0px; top: 0px;
        border-right: solid blue 1px;
    } 
    .plus {
        right: 0px; top: 0px;
        border-left: solid blue 1px;
    } 
    </style>
    </head>
    <body>
    <div id="counter1" class="counter">
        <div class="minus">-</div>
        <div>0</div>
        <div class="plus">+</div>
    </div>
    <br/><br/><br/>
    <div id="counter2" class="counter">
        <div class="minus">-</div>
        <div>0</div>
        <div class="plus">+</div>
    </div>
    
    
    <script type="text/javascript">
      function Counter(div)
      {
          var ticker = null;
          var count = 0;
          var bywhat = 0;
          var curbutton = null;
          var down = div.getElementsByTagName("div")[0];
          var msg = div.getElementsByTagName("div")[1];
          var up = div.getElementsByTagName("div")[2];
          up.onmousedown = function() { bywhat=1; bumpby(this); }
          up.onmouseup = stopbump;
          down.onmousedown = function() { bywhat=-1; bumpby(this); }
          down.onmouseup = stopbump; 
    
          function bumpby(what)
          {
              if ( what != null )
              {
                  curbutton = what; 
                  curbutton.style.backgroundColor = "yellow";         
              }
              clearTimeout(ticker);
              count += bywhat;
              if ( count < 0 ) count = 0; // *** OPTIONAL TO KEEP COUNT 0 OR ABOVE ***
              msg.innerHTML = count;
              ticker = setTimeout(bumpby,300);
          }
          function stopbump()
          {
              if ( curbutton != null ) 
              {
                  curbutton.style.backgroundColor = "transparent";         
              }
              clearTimeout(ticker);
          }
      }
      Counter(document.getElementById("counter1"));
      Counter(document.getElementById("counter2"));
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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