SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    determining whether mouse is decrementing or incrementing

    Hi,

    I'm having an issue determining whether the mouse is increment or decrementing.

    Code JavaScript:
        _self.mousedown(function(e) {
          var initialValue = parseInt($('#value').val());
          var initialMouse = e.pageX;
     
          $('body').mousemove(function(e) {
            var currentMouse = e.pageX;
     
            if (currentMouse <= options.max && currentMouse >= options.box) {
              var currentValue = parseInt($('#value').val());
              var isIncrementing = currentMouse > initialMouse ? true : false;
     
              if (isIncrementing)
                currentValue += 1;
              else
                currentValue -= 1;
     
     
              $('#value').val(currentValue);
              _self.css({'left' : currentMouse});
            }
          });
        })

    I know where the problem is:

    currentMouse > initialMouse ? true : false;

    As I move my mouse to the right, this returns true. When I move the mouse to the left, this still returns true; because the currentMouse value is still greater than the initialMouse value.

    I know I'm somewhere near the correct answer, my eyes just hurt

    Can someone lend a hand? thanks!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Just before the isIncrementing test set

    initialMouse = currentValue;

    that way the test is comparing to the last mouse position rather than the start mouse position.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't seem to work. When I go to the right, it increments correctly. But when I go back to the left, it keeps incrementing, hits a midpoint and starts to decrement.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work.

    The problem I seem to be having now, if I move the mouse too quickly, it doesn't capture the correct number and doesn't add/substract the correct amount because of that.

    What can I do to slow it down internally without the user knowning about it?

    Code JavaScript:
        _self.mousedown(function(e) {
          var initialValue = parseInt($('#value').val());
          var initialMouse = e.pageX;
          var lastPosition = e.pageX;
     
          $('body').mousemove(function(e) {
            var currentMouse = e.pageX;
     
            if (currentMouse <= options.max && currentMouse >= options.box) {
              var currentValue = parseInt($('#value').val());
              var isIncrementing = currentMouse > lastPosition ? true : false;
     
              if (isIncrementing)
                currentValue += 1;
              else
                currentValue -= 1;
     
              $('#value').val(currentValue);
              _self.css({'left' : currentMouse});
     
              lastPosition = currentMouse;
            }
          });
        })

    I got it by getting the last position and checking to see if the current mouse position was greater or lesser than.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    What about adding or subtracting the difference between initial position and last position rather than adding or subtracting one.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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