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.

can you set up an example on jsfiddle.net? or post your entire code and I'll set it up for you — painotpi, Jan 16 '13 at 06:06
I couldn't get this to happen for me. Please post your code. — Samuel Edwin Ward, Jan 24 '13 at 20:26
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). — Pranav Singh, Jan 25 '13 at 13:18

score 3 · Accepted Answer · answered Jan 24 '13 at 11:30

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.

score 1 · Answer 2 · answered Jan 16 '13 at 06:11

1

You can do this one:

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

answered Jan 16 '13 at 06:11

Jai

74,255
12
74
103

would this be trigger for all scroll action in your page or just the scroll bar for your div? – Justin Homes Jan 16 '13 at 16:00

score 1 · Answer 3 · edited May 23 '17 at 11:51

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?

score 1 · Answer 4 · answered Jan 25 '13 at 13:20

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.

Jquery Blur event on div scrolbar

4 Answers4

Linked