1

I have an image that I have given the id #scroller to. What I would like to do is move the scroller horizontally according to the x-coordinate of the mouse but only when it's held down. I'm trying to move scroller against a hroizontal line called #bar. The amount the scroller can move depends on the width of the bar. Here is my code so far.

$(document).ready(function() {
    var barWidth = $("#bar").width();
    var mouseDown = false;

    $(document).mousedown(function() {
        mouseDown = true;
    });
    $(document).mouseup(function() {
        mouseDown = false;
    });

    $(document).on("mousemove", function(e) {
        if (mouseDown) {
            if (e.pageX >= barWidth) {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", barWidth);
            } else {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", e.pageX);
            }
        }
    });
});

The #debug just prints something out on to the screen. It helps in debugging. It's not working as expected. I want the scroller to move when the mouse is held down and moving.

Many Questions
  • 125
  • 1
  • 10
  • 1. I'd kill the #debug and just use the console for debug messages. 2. How exactly is it "not working as exptected"? Can you give an example? – nurdyguy Dec 29 '15 at 23:12
  • can you post it in codepen ? to watch how it is working now. – Rolly Dec 29 '15 at 23:12
  • 1) See this to locate buttons pressed when event triggered: http://stackoverflow.com/questions/4065992/jquery-detecting-pressed-mouse-button-during-mousemove-event 2) Please create jsfiddle/speficy wht is not working as expected. – Dmitry Dec 29 '15 at 23:13
  • Thanks for the replies. I'm sorry but I don't know how to use jsfiddle or codepen. Also, I just changed one thing. I deleted the .mousedown, and .mouseup functions. and in the place of if (mouseDown), I wrote $(document).on("mousedown", function(e) {. So now what happens is the scroller moves to a new location when the mouse is clicked. It doesn't move again until I let go of the mouse and click it again at a different location. So it's basically moving discretely not continuously. I hope that helps – Many Questions Dec 29 '15 at 23:17
  • @ManyQuestions mouse click event triggered only once after you pushed mouse down and release it while beeing focus on the same element. It won't be trigger again if mouse moved – Dmitry Dec 29 '15 at 23:25
  • Thank you! This post helped get mine to work! :D – KennethDale1 Dec 15 '21 at 19:46

1 Answers1

0

You problem is likely in the fact that you didn't change position attribute for your scroller. It should be either style="position:absolute" or style="position:relative" otherwise .css("left", barWidth) won't have effect. See js fiddle here:

https://jsfiddle.net/0m0j35oc/

More over it is better to track buttons on event itself(see this question for more details) as mouseup/mousedown event might be triggered outside of the page effectively getting you cached state out of sync. See example here:

https://jsfiddle.net/g0uqLL9n/

Community
  • 1
  • 1
Dmitry
  • 1,263
  • 11
  • 15
  • Thank you for that. I have the position set to absolute. I just realized the problem. Now I feel stupid. So the scroller works fine. It's just that the #bar that I used is a large image. So when I click and hold down the mouse in the area of that picture, it doesn't work properly. It works when I click and hold the mouse outside the area of the bar. – Many Questions Dec 29 '15 at 23:33