title: Javascript: How to check if element is visible?
body: <p>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:</p>
  
  <p>A button triggers the function <code>show_guides()</code>.</p>
  
  <pre><code>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);
      }
  }
  </code></pre>
  
  <p>If the <code>$('#guides')</code> are visible I want to save a cookie and if they are not I want to get rid of it.</p>
  
  <p>However zepto.js doesn't support selectors like <code>:visible</code> so I have to find a different way.
  Any ideas how to do that?  Right now I'm getting the following error: </p>
  
  <blockquote>
    <p>Uncaught Error: SYNTAX_ERR: DOM Exception 12</p>
  </blockquote>
  
  <p>In the zepto documentation i've read this …</p>
  
  <blockquote>
    <p>For basic support of jQuery’s non-standard pseudo-selectors such as
    :visible, include the optional “selector” module.</p>
  </blockquote>
  
  <p>But I have no idea how to include this.</p>
  
  <p>Anybody out the who could help me out here? Thank you in advance.</p>