JAVASCRIPT JQUERY

[Solved -10 Answers] How to check if an element is hidden in jQuery

By Wikitechy Editor

March 16, 2017 2 Min Read

66 0

PROBLEM

It is possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()
How would you test if an element is visible or hidden?

SOLUTION 1:

The Problem refers to a single element, You can use this code:

javascript code

// Checks for display:[none|block], ignores visible:[true|false]

$(element).is(":visible");

[ad type=”banner”]

If you change your selector to use jQuery considering you’re using it in other places anyway:

javascript code

if($('#testElement').is(':visible')) 
{
    // Code
}

Note:

If any one of a target element’s parent elements are hidden, then .is(‘:visible’) on the child will return false

SOLUTION 2:

hidden selector:

javascript code

// Matches all elements that are hidden
$('element:hidden')

visible selector:

javascript code

// Matches all elements that are visible
$('element:visible')

[ad type=”banner”]

SOLUTION 3:

The Functions doesn’t work with the visibility attribute.

javascript code

if ( $(element).css('display') == 'none' )
{
    // element is hidden
}

SOLUTION 4:

Use the jQuery :visible Selector

html code

<!DOCTYPE html>
<html>
<head>
<title>wikitechy: jQuery Test If an Element is Visible on a Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });
    });
</script>
</head>
<body>
    <button type="button">Toggle Paragraph Display</button>
    <p style="display: none;">Learn to code in wikitechy Tutorial.</p>
</body> 
</html>

SOLUTION 5:

To determine whether an element is collapsed or not by using the :visible and :hidden selectors.

javascript code

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

you can just include :visible or :hidden in the selector expression

javascript code

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

[ad type=”banner”]

SOLUTION 6:

If you have a selector and you want to perform some action on it only if is visible or hidden, you can use filter(“:visible”) or filter(“:hidden”).

if statement,

javascript code

if ($('#btnUpdate').is(":visible"))
{
   $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Another way is more efficient:

javascrpit code

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

You can do it all in one line:

javascript code

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

SOLUTION 7:

In show() and hide() to make div hidden/visible:

javascript code

if( $(this).css('display') == 'none' )
{
    /* your code goes here */
} else {
    /* alternate logic   */
}

[ad type=”banner”]

SOLUTION 8:

You can use .is(‘:visible’) to test if something is visible and .is(‘:hidden’) to test for the opposite.

javascript code

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

SOLUTION 9:

jQuery:

javascript code

$('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });

SOLUTION 10:

Using JavaScript:

javascript code

function isRendered(domObj)
{
    if ((domObj.nodeType != 1) || (domObj == document.body)) 
{
        return true;
 }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") 
{
        return isRendered(domObj.parentNode);
 } else if (window.getComputedStyle) 
{
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") 
{
            return isRendered(domObj.parentNode);
}
}
    return false;
}

Notes:

It works for nested elements
It works for CSS and inline styles
It doesn’t require a framework

Tags:

:hidden Selector :visible Selector Check If An Element Is Hidden Using Jquery check if element is visible javascript Checking if an element is visible on-screen using jQuery dom javascript javascript - Detect if an element is visible javascript - How do I check if an element is hidden in jQuery?javascript check if element is visible on screen jquery jQuery Basics: Is Element Hidden or Visible?jquery check if element is display none jquery check if element is in viewport jquery check if element is visible on screen jquery if is visible jQuery if statement to check visibility jquery is not visible jquery set visible visibility visibility - How do i test if something is hidden with jQuery?

[Solved -10 Answers] How to check if an element is hidden in jQuery

Tags:

Wikitechy Editor

Other Articles

CSS – When to use margin vs padding in CSS

PHP define() vs const

No Comment! Be the first one.

Leave a Reply

Popular Posts

Download Huawei P9 Lite Android Nougat Update [B336]

How to Install TWRP Recovery and Root Mi5s & Mi5s Plus

How to Downgrade Honor 5c from Nougat to Marshmallow

Download ZTE Axon 7 Android 7.1 Nougat Update (MiFavor 4.2)(B13)

Categories

Related Posts

Why is JavaScript Getting Such a Bad Reputation?

Best Startups Examples on React Native

Java Programming – Word Wrap Problem

Type and hit Enter to search

Type and hit Enter to search

[Solved -10 Answers] How to check if an element is hidden in jQuery

Tags:

Share Article

Other Articles

No Comment! Be the first one.

Leave a Reply

Popular Posts

Categories

Related Posts