• 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?

  • 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

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”]

  • The Functions doesn’t work with the visibility attribute.
javascript code 
if ( $(element).css('display') == 'none' )
{
    // element is hidden
}

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>

  • 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”]

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" });

  • 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”]

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'));

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();
    }
  });

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

Categorized in:

JAVASCRIPTJQUERY

Tagged in:

, , , , , , , , , , , , , , , , , , , ,