CODEWITHSUNDEEP
javascriptjquery
Rudolf Lamprecht
Rudolf Lamprecht

Reputation: 1070

Close popup div if element loses focus

I have the following scenario: On a label's mouseover event, I display a div. The div must stay open in order to make selections within the div. On the label's mouseout event, the div must dissappear. The problem is that when my cursor moves from the label to the div, the label's mouseout event is fired, which closes the div before I can get there. I have a global boolean variable called canClose which I set to true or false depending on the case in which it must be closed or kept open. I have removed the functionality to close the div on the label's mouseout event for this purpose. Below is some example code.

EDIT I have found a workaround to my problem, event though Alex has also supplied a workable solution. I added a mouseleave event on the label as well, with a setTimeout function which will execute in 1.5 seconds. This time will give the user enough time to hover over the open div, which will set canClose to false again.

$("#label").live("mouseover", function () {
        FRAMEWORK.RenderPopupCalendar();
    });

$("#label").live("mouseout", function () {
        setTimeout(function(){
            if(canClose){
                FRAMEWORK.RemovePopupCalendar();
            }
        },1500);
    });

    this.RenderPopupCalendar = function () {
        FRAMEWORK.RenderCalendarEvents();
        }
    };


    this.RenderCalendarEvents = function () {
        $(".popupCalendar").mouseenter(function () {
            canClose = false;
        });

        $(".popupCalendar").mouseleave(function () {               
            canClose = true;
            FRAMEWORK.RemovePopupCalendar();
        });
    }

    this.RemovePopupCalendar = function () {
        if (canClose) {
            if ($(".popupCalendar").is(":visible")) {
                $(".popupCalendar").remove();
            }
        }
    };

Any help please?

Upvotes: 1

Views: 1898

Answers (3)

SeekLoad
SeekLoad

Reputation: 1089

This will close the entire tab page if the tab page loses focus. How ever if you target it, it can work for something within the page too, just change the target codes.

JavaScript:

<script type="text/javascript" >
delay=1000 // 1 sec = 1000.
closing=""
function closeme(){
closing=setTimeout("self.close()",delay)
// self means the tab page close when losing focus, but you can change and target it too.
}
<!--// add onBlur="closeme()" onfocus="clearTimeout(closing)" to the opening BODY tag//-->
</script>

HTML:

<body onBlur="closeme()" onfocus="clearTimeout(closing)">

Upvotes: 0

Alex
Alex

Reputation: 9031

I would wrap the <label> and <div> in a containing <div> then do all you mouse/hide events on that.

Check out this fiddle example - http://jsfiddle.net/6MMW6/1

Upvotes: 2

Endy
Endy

Reputation: 696

Give your popupCalendar an explicit ID instead of a class selector, e.g. 

<div id="popupCalendar">

Reference it with #popupCalendar instead of .popupCalendar.

Now, remove() is quite drastic as it will completely remove the div from the DOM. If you wish to display the calendar again you should just .hide() it.

But your logic seems a bit overly complex, why not just .show() it on mouseenter and .hide() on mouseout events ?

Upvotes: 0

Related Questions