Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to check display (none/block) of a div in jquery?

I am using this,

$("#loginanchor1").click(function (e) {
    e.preventDefault();
    $("#signin_menu1").slideDown("slow");
});
$(document).mouseup(function (e) {
    if ($(e.target).parent("a.loginanchor1").length == 0) {
        //$(".signin").removeClass("menu-open");
        $("#signin_menu1").slideUp("slow");
    }
});

Everything works fine but what happens is when the signin_menu1 is displayed block and i click my mouse button inside the div the div slidesup... I want mouseup function to be prevented when the signin_menu1 is displayed block. So i thought of changing the condition like,

if(($(e.target).parent("a.loginanchor1").length==0) &&( //check the display of the div)

Now how to check the display?

like image 441
Mubeen Avatar asked Sep 23 '10 07:09

Mubeen


People also ask

How check display is blocked or not in jQuery?

Answer: Use the jQuery :visible Selector You can use the jQuery :visible selector to check whether an element is visible in the layout or not. This selector will also select the elements with visibility: hidden; or opacity: 0; , because they preserve space in the layout even they are not visible to the eye.

How can I tell if a div is in a viewport?

Use the getBoundingClientRect() method to get the size of the element and its relative position to the viewport. Compare the position of the element with the viewport height and width to check if the element is visible in the viewport or not.

How do you know if an element is hidden?

Another way to check if an element is hidden is to use the window. getComputedStyle() method. It will return the display property value of the object. We can check if the string is equal to none meaning the element is hidden and do something.


1 Answers

try

$(document).mouseup(function (e) {
    var $parent = $(e.target).parent("a.loginanchor1");
    if ($parent.length == 0 && !$("#signin_menu1").is(':visible')) {
        //$(".signin").removeClass("menu-open");
        $("#signin_menu1").slideUp("slow");
    }
});

I'm confused with the problem, but $("#signin_menu1").is(':visible') would check if the div is visible (display:block).

added notes:

you may try to check if the $(e.target) is the signin_menu1 or the is inside signin_menu1. do it like this,

$(document).mouseup(function (e) {
    if ($(e.target).is('#signin_menu1') || $(e.target).closest('#signin_menu1').length > 0) { return ; } // do nothing on mouseup
    var $parent = $(e.target).parent("a.loginanchor1");
    if ($parent.length == 0) {
        //$(".signin").removeClass("menu-open");
        $("#signin_menu1").slideUp("slow");
    }
});
like image 154
Reigel Avatar answered Oct 05 '22 07:10

Reigel