javascript tutorial - [Solved-5 Solutions] Hidden element - javascript - java script - javascript array



Problem:

How would we test if an element is visible or hidden ?

Solution 1:

// Checks for display:[none|block], ignores visible:[true|false]
$(element).is(":visible"); 
click below button to copy the code. By JavaScript tutorial team

Solution 2:


	// Matches all elements that are hidden
$('element:hidden')
And the visible selector:
// Matches all elements that are visible
$('element:visible')
click below button to copy the code. By JavaScript tutorial team

Solution 3:

if ( $(element).css('display') == 'none' ){
    // element is hidden
}
click below button to copy the code. By JavaScript tutorial team

Functions don't work with the visibility attribute.

Solution 4:

None of these answers address what we understand to be the question, which is what we was searching for, "How do I handle items that have visibility: hidden?". Neither :visible nor :hidden will handle this, as they are both looking for display per the documentation. As far as I could determine, there is no selector to handle CSS visibility. Here is how I resolved it (standard jQuery selectors, there may be a more condensed syntax):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
click below button to copy the code. By JavaScript tutorial team

Solution 5:

You can determine whether an element is collapsed or not by using the :visible and :hiddenselectors.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
click below button to copy the code. By JavaScript tutorial team

If you're simply acting on an element based on its visibility, you can just include :visible or :hidden in the selector expression. For example:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
click below button to copy the code. By JavaScript tutorial team

Related Searches to javascript tutorial - Hidden element