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.

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