Search code examples
javascripthtmlscrollmouseleave

Original thumbs position when mouseleave scrolled thumbs div


I'm using this code http://jsbin.com/uninug/3/edit?html,css,js,output to do a thumbs slider.

I want to reset the inner thumbs div position to its original position when mouse "leave" (not hover) the container thumbs div, but I don't know much JavaScript (i'm a beginner). I'm trying this code but it just do nothing:

$bl.mouseleave (function() {
        $th.css({marginLeft: 0 });
    });

Any clue, tutorial or help are welcome. Thanks!


Solution

  • The function in the script you are referring to has a timeout function that continuously asks for current position (given in local variables) and calculates the correct offset and margins based on that. Therefor your current javascript doesn't work - cause it will just be overruled by the timeout function that looks at the local variables for current position. Therefor you have to reset the position to 0.

    By adding a function like this:

    $bl.mouseleave(function(e) {
        mX = 0;
        mX2 = 0;
    });
    

    http://jsbin.com/mecofesito/1/edit?html,css,js,output