CODEWITHSUNDEEP
javascriptjquerysliderjquery-animate
Bill
Bill

Reputation: 5688

stop a previous function from continuing to be excuted with jquery

I have the following function to create a slider. It works (almost perfectly)... The problem I'm having now is that once you click down on the slider it moves around like it should, but I can't figure out how to stop it from moving when I release the mouse?

Suggestions? Thanks!

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);

        //tracks the mosemovement in the document
        $(document).mousemove(function(e){
            currentPosition = e.pageX - offset;

            //takes the mouse current position (minues the offset) and sets an absolute position
            $('#slider').css('left', currentPosition + "px");
            console.log("CURRENT POSITION: " + currentPosition);

            //checks to make sure it's within the box
            if(currentPosition <= 0){
                $('#slider').css('left', 0 + "px");
            }else if(currentPosition >= 400){
                $('#slider').css('left', 400-20 + "px");    
            }
        });
    });

    $("#slider").mouseup(function(){
        $('#slider').css('left', currentPosition + "px")
            console.log("Fixed");

    });

};

EDIT: MVCHR, I went off your example, and came up with the following. The mouse move still works, but when you release the mouse it keeps moving. Im sure I"m missing something stupid

Edit, again: Silly mistake, I still had the mouse move in there. Took it out and it works perfectly now! Thanks :)

Thanks again

var moveSlider = function(){

    //sets the current position and offset variables
    var currentPosition;
    var offset;
    var rightOffset

    //looks for the mousedown event on the slider
    $("#slider").mousedown(function(e){
        //sets the offset = to the mouse coordinate of the page - the offset of the slider
        offset = e.pageX - this.offsetLeft;
        console.log("offset: " + offset);
        $(document).bind('mousemove', mmHandler);
    }); 

    var mmHandler = function (e) {

            //tracks the mosemovement in the document
            $(document).mousemove(function(e){
                currentPosition = e.pageX - offset;

                //takes the mouse current position (minues the offset) and sets an absolute position
                $('#slider').css('left', currentPosition + "px");
                console.log("CURRENT POSITION: " + currentPosition);

                //checks to make sure it's within the box
                if(currentPosition <= 0){
                    $('#slider').css('left', 0 + "px");
                }else if(currentPosition >= 400){
                    $('#slider').css('left', 400-20 + "px");    
                }
            });
        };


    $(document).mouseup(function(e) {
      // some code then
      $(document).unbind('mousemove', mmHandler);
    });


};

Upvotes: 0

Views: 728

Answers (2)

mVChr
mVChr

Reputation: 50205

In case you have other functions bound to mousemove that you don't want to remove, move your mousemove function to a named function that you bind on mousedown and unbind on mouseup. Note that you'll also want to put the mouseup on document and not #slider assuming your slider doesn't move vertically.

Something like this:

var mmHandler = function (e) {
                  // mousemove code here
                };

$("#slider").mousedown(function(e) {
  // some code then
  $(document).bind('mousemove', mmHandler);
});

$(document).mouseup(function(e) {
  // some code then
  $(document).unbind('mousemove', mmHandler);
});

Upvotes: 2

JaredMcAteer
JaredMcAteer

Reputation: 22545

In your mouse up event handler add in:

$(document).unbind('mousemove');

You should probably put the function for handling the bound mouse move into something you can pass to the unbind because the code above will affect all mousemove handlers on the document that may be set.

unbind api docs

Upvotes: 3

Related Questions