Javascript: How to check if element is visible?

Question

i'm using the lightweight zepto.js framework and now I need to test if an element on the page is visible or not … this my case:

A button triggers the function show_guides().

function show_guides() {
    $('#guides').toggle();

    if ( $('#guides').is(':visible') ) { // does not work
        //$.cookie('guides_visible', 'true');
        console.log("visible");
    } else {
        console.log("invisible");
        //$.cookie('guides_visible', null);
    }
}

If the $('#guides') are visible I want to save a cookie and if they are not I want to get rid of it.

However zepto.js doesn't support selectors like :visible so I have to find a different way. Any ideas how to do that? Right now I'm getting the following error:

Uncaught Error: SYNTAX_ERR: DOM Exception 12

In the zepto documentation i've read this …

For basic support of jQuery’s non-standard pseudo-selectors such as :visible, include the optional “selector” module.

But I have no idea how to include this.

Anybody out the who could help me out here? Thank you in advance.

Benton

"But I have no idea how to include this." The same way you load any other JavaScript file. Include this file after you loaded zepto. – Showiness

Answer 1

You can check the display CSS property:

 function show_guides() {

        $('#guides').toggle();

        if ( $('#guides').css('display') == 'block' ) { 
            console.log("visible");
        } else {
            console.log("invisible");
        }
    }

Spitter

This does not work if an ancestor is hidden. For example, an image inside a hidden div would return 'block', even though it is not visible because it's container div is hidden. – Corpsman

Answer 2

try

     style.display="block";

and

     style.display="hidden";

Tallage

Answer 3

You can check visibility:visible/hidden, or display:block/none

$('#guides').css('visibility') == 'visible'
$('#guides').css('display') == 'block'

Humeral

Answer 4

If all you want is to check visibility you can just use this

  function visible(elem){
    elem = $(elem)
    return !!(elem.width() || elem.height()) && elem.css("display") !== "none"
  }

taken straight from the zepto selectors plugin. Otherwise you can just include the selectors module from https://github.com/madrobby/zepto/blob/master/src/selector.js as Felix Kling suggested

Creath