Posted about 6 years ago. Visible to the public.

Check whether an element is visible or hidden with Javascript

jQuery

You can say:

Copy
$(element).is(':visible')

and

Copy
$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Prototype

Don't use Element#visible(), it just checks if a CSS attribute display: none exists. This is to naive for most cases.

Emulate jQuery's implementation instead:

Copy
element.offsetWidth > 0 && element.offsetHeight > 0;

Or maybe you'd even like to patch Prototype so it behaves like jQuery:

Copy
Element.addMethods({ visible: function() { return offsetWidth > 0 && offsetHeight > 0; } });

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Author of this card:

Avatar
Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandropedia