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.

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.

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Jan 16, 2013 at 5:59 Sachin Prasad 5,4071212 gold badges5656 silver badges101101 bronze badges asked Jan 16, 2013 at 5:49 Justin HomesJustin Homes 3,8091010 gold badges5353 silver badges7979 bronze badges 3

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3 +25

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.

You can do this one:

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

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?

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.