JQuery: Check whether an Element is Hidden from the user

Question

How to check whether a particular element is hidden from the user? In my code, under certain conditions, this code will be called:

$("#VersionSelectField").hide('fast');

So I have to make sure that if $("#VersionSelectField") is hidden, then I would not have to validate the value inside it when I submit the form ( I use JQuery Validate library for this purpose).

Any ideas?

Paolo Bergantino · Accepted Answer · 2009-07-06 06:17:06Z

75

$("#VersionSelectField").is(':hidden');

edited Jul 6, 2009 at 6:17

Paolo Bergantino

490k83 gold badges523 silver badges437 bronze badges

answered Jul 6, 2009 at 4:47

user120242

15.3k3 gold badges43 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rob Over a year ago

That will just check if it's a hidden input.

Jeff Meatball Yang Over a year ago

@Rob - This will actually check if it's not visible to the user. docs.jquery.com/Selectors/hidden

Rob Over a year ago

i wasn't aware of that selector. Thanks for bringing it to light for me.

Sparky Over a year ago

@Jeff Meatball Yang No, it wont check if the element is 'actually visible to the user'. Eg: The element will not be actually visible if its parent has 'overflow:hidden' and the element is not directly positioned inside the parent.

VisioN · Accepted Answer · 2012-11-20 13:54:28Z

8

This works for me:

$("#VersionSelectField").css("display") == "none";

edited Nov 20, 2012 at 13:54

VisioN

146k35 gold badges287 silver badges291 bronze badges

answered Jul 6, 2009 at 5:57

Mark A. Nicolosi

86.2k11 gold badges47 silver badges46 bronze badges

Comments

xandy · Accepted Answer · 2009-07-06 06:08:51Z

0

You may use the callback of the hide() method. For example:

$("#VersionSelectField").hide('fast', function() {
    GlobalVersionSelectFieldHidden = true;
});

Above is only one method to make use of that, basically the callback will only fires when the animation finished (ie, totally hidden). Of course polluting the global variable scope is very naughty but just a quick example.

Alternatively, checking whether display is "none" like Mark suggest also works, since the JQ effect will totally hide things using that particular css property.

answered Jul 6, 2009 at 6:08

xandy

27.4k8 gold badges61 silver badges66 bronze badges

Comments

VisioN · Accepted Answer · 2012-11-20 13:54:43Z

0

Try $("#versionselectfield[display='none']").length > 0.

edited Nov 20, 2012 at 13:54

VisioN

146k35 gold badges287 silver badges291 bronze badges

answered Jul 6, 2009 at 5:20

Rob

3,0864 gold badges31 silver badges32 bronze badges

6 Comments

Rob Over a year ago

Not sure why this was voted down. Anyone care to explain why checking the display attribute is the wrong answer here?

redsquare Over a year ago

I didnt vote you down but the tag would be style="display:none" therefore you selector does not work

redsquare Over a year ago

Rob - you can always flag things up to a mod if they suspect to you.

Rob Over a year ago

Thanks for the heads up, i updated my answer w/ the display attribute. Nah, don't think its a TOS violation or anything - just rude!

redsquare Over a year ago

rob - still wouldnt work as the attribute in this case is style not display. .is(':visible') is the right way.

|

Collectives™ on Stack Overflow

JQuery: Check whether an Element is Hidden from the user

4 Answers 4

4 Comments

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related