How to Check the Visibility of an Element Using jQuery

In the  jQuery versions before 1.3.2  an element was regarded as Visible if the CSS Visibility Property of that element was not defined as “Hidden” or if the CSS Display Property of that was defined as  “Visible “ or  it was an element with an input type not equal to “Hidden”.

There are several options available to test whether an element is hidden or visible with jQuery. Nowadays with the later versions of jQuery the visibility of an element is determined by taking into consideration the height and width of the element.

The element is considered to be visible if the height or width of the element is greater than zero otherwise the element is considered as Hidden.

a) We can make use of a Pure Selector to find out the visibility of an element and this method is considered to render the best performance than other methods. Below is the sample code listed for the same:

if ($('element_name:visible').length > 0){

alert(‘Element is Visible (Verified Using a Pure Selector)!’);

}

b) Using the is() Method of jQuery

if ($('element_name').is(':visible')) {

alert(‘Element is Visible (Verified Using is() Method)!’);

}

c) Using the filter() Method of jQuery

if ($('element_name').filter(':visible'). length >0) {

alert(‘Element is Visible (Verified Using filter() Method)!’);

}

 

Recently Published

»

Is Your Business Site Fully Accessible?

Does your business site have full accessibility? Even with the ADA ...

»

Secure Web: 5 Best Practices For Application Development

There are several essential best practices for secure web ...

»

Laravel PHP Framework: Features and benefits for web development

Companies and organizations are focusing on developing custom web ...

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...