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,036
    Thanks
    23
    Thanked 589 Times in 588 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.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 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,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 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,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 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,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 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
    •