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

2

11

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?

Anarchic answered 23/9, 2010 at 7:13 Comment(0)
S
16

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");
    }
});
Scape answered 23/9, 2010 at 7:18 Comment(3)
it works but the div doesn't slide up when i click outside the divAnarchic
i want to prevent mouseup event inside the divAnarchic
Please note that the :visible selector does not take effect if the parent element is display: none. So even if the element you check with is(':visible') has the CSS property display: block / inline / ... this selector won't fetch it.Pep
Z
3

You can use jquery's :visible for this.

Zoilazoilla answered 23/9, 2010 at 7:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.