CODEWITHSUNDEEP
jquery
gordyr
gordyr

Reputation: 6276

Preventing jquery mouseleave event from firing while mouse button is held down

I have a simple piece of code which shows a scrollbar when the mouse is over a container, and fade it out when the mouse leaves:-

$('#sidebar-wrapper').on('mouseenter mouseleave', '#TopPane, #BottomPane', function(e){

var $div = $(this).find ('.jspDrag');


    if ( e.type == 'mouseenter') {
    $div.show();
    }

    if ( e.type == 'mouseleave' ) { 
    $div.fadeOut('600');
    }


});

What I want to do is have a mousedown event on $('.jspDrag') that will prevent the mouseleave event from firing for the whole duration that the mouse is held down.

The idea is that if the user is moving the scrollbar with the mouse by holding down the button on it, they may accidentally slip out of the element, if so I do not want the custom scrollbar div to fadeout, as long as the left mouse button is still held down.

I have playd with setTimeout but and the mousedown events but have been able to find a solution that provides the correct behaviour. Any ideas?

EDIT:

Just to provide more detail - I am looking for the same behaviour that the "facebook" sidebar custom scrollers have. On Facebook the scroller appears when you hover over the sidebar, as does mine. But on Facebook if you hold the mouse down and move the mouse out of the sidebar or even on to the actual browser scroller, the custom scroller remains visible and active. This is the bahviour I wish to emulate.

EDIT 2:

I have added a JsFiddle to demonstrate as requested. I have stripped the css/content as much as possible. Ig you hover your mose over the top div you will see the hidden custom scrollbar appear.

http://jsfiddle.net/wSMVg/

Upvotes: 0

Views: 1674

Answers (2)

Sal
Sal

Reputation: 1655

A simple solution will be:

var mousedown = 0;
$('#sidebar-wrapper').mousedown(function(){
    mousedown = 1;
});
$('#sidebar-wrapper').mouseup(function(){
    mousedown = 0;
});
$('#sidebar-wrapper').on('mouseenter mouseleave', '#TopPane, #BottomPane', function(e){
    var $div = $(this).find ('.jspDrag');
    if ( e.type == 'mouseenter') {
        $div.show();
    }
    if ( e.type == 'mouseleave' ) { 
        if (mousedown == 0){
            $div.fadeOut('600');
        }
    }
});

just not sure whether $('#sidebar-wrapper') is the correct object :)

EDIT:

here's the jsfiddle: http://jsfiddle.net/wSMVg/5/

Upvotes: 1

Matt MacLean
Matt MacLean

Reputation: 19648

var mouseDown = false;
var mouseIsOver = false;

$('#sidebar-wrapper').on('mouseenter mouseleave mousedown mouseup', '#TopPane, #BottomPane', function(e){

var $div = $(this).find ('.jspDrag');
    if ( e.type == "mousedown" ) {
        mouseDown = true;
    }

    if ( e.type == "mouseup" ) {
        mouseDown = false;
        if ( !mouseIsOver ) {
            $div.fadeOut('600');
        } 
    }

    if ( e.type == 'mouseenter') {
        mouseIsOver = true;
        $div.show();
    }

    if ( e.type == 'mouseleave') { 
        mouseIsOver = false;
        if ( !mouseDown ) {
            $div.fadeOut('600');
        }
    }
});

Upvotes: 0

Related Questions