Jquery Blur event on div scrolbar

Question

I have a div with scroll bar. Using Firefox when I click on scroll bar to drag it down to see the div list the blur event is fired and hides my div which I have set to hide when blur is fired. How can I prevent the blur to fire when the scroll bar is used:

$("#mydiv").blur(function () {
    $('#mydiv').fadeOut();
    console.log("fadeout blur");
});

I display this div using:

 $('#mydiv').fadeIn();

I want the div to hide when its not active but not hide when I try to click on the scroll bar.

Answer 1

May be this is what you are looking for

$(document).ready(function(){
        $('#mydiv').fadeIn();   

        $("body").bind('click', function(ev) {
        var myID = ev.target.id;
        if (myID !== 'mydiv') {
            $('#mydiv').fadeOut();
        }
    });
});

This will bind the click event with the body and also check the id of the element which triggers the click event. If it doesn't match the DIV, the div will be closed else the div will be always open.

Answer 2

You can do this one:

$(window).scroll(function() {
   $('#mydiv').css('display','block');
});

Answer 3

var scrolling = false, scrollingTimeout, blurTimeout;

$(window).scroll(function () {
    if (scrollingTimeout) {
        clearTimeout(scrollingTimeout);
    }
    scrolling = true;

    scrollingTimeout = setTimeout(function(){
        scrollingTimeout = null;
        scrolling = false;
    }, 300);
});
$("#mydiv").blur(function () {
    var that = $(this);
    if (!scrolling) {
        that.fadeOut();
    } else {
        if (blurTimeout) {
            clearTimeout(blurTimeout);
        }
        blurTimeout = setTimeout(function () {
            blurTimeout = null;
            that.focus();
        }, 600);
    }
});

see jQuery scroll() detect when user stops scrolling and Can I declare logic on jQuery for the start and end of a scrolling event?

Answer 4

Seems your scroll bar is not formed within the div & clicking on it causes call to blur. Please check the css/style used for showing scroll for div is doing what you are expecting (forming scroll bar inside div), if this is the case then use a parent div over both(div & scroll bar) & use focusOut/blur event on parent div containing both.