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?

Answer 1

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

• Rob: That will just check if it's a hidden input.
• Jeff Meatball Yang: @Rob - This will actually check if it's not visible to the user. docs.jquery.com/Selectors/hidden
• Rob: i wasn't aware of that selector. Thanks for bringing it to light for me.
• Sparky: @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.

Answer 2

This works for me:

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

Answer 3

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.

Answer 4

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

• Rob: Not sure why this was voted down. Anyone care to explain why checking the display attribute is the wrong answer here?
• redsquare: I didnt vote you down but the tag would be style="display:none" therefore you selector does not work
• redsquare: Rob - you can always flag things up to a mod if they suspect to you.
• Rob: 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: rob - still wouldnt work as the attribute in this case is style not display. .is(':visible') is the right way.