Search code examples
javascriptmootools

Best way to find if a DOM object is visible or not, using mootools


What is the best way to find if a DOM object is visible?

Various cases when object is considered not visible:

  1. display: none;
  2. visibility: hidden;
  3. one of the parents has display: none or visibility: hidden
  4. Another DOM element is obscuring the queried element (Nice to have, but I can manage without it).
  5. Item outside of screen boundaries.

Solution

  • since its mootools and this got dealt with on the mootools mail list and it is now going to be a part of Element.shortcuts...

    /*
    * Inspired from http://github.com/jeresig/sizzle/commit/7631f9c3f85e5fa72ac51532399cb593c2cdc71f
    * and this http://github.com/jeresig/sizzle/commit/5716360040a440041da19823964f96d025ca734b
    * and then http://dev.jquery.com/ticket/4512
    */
    
    Element.implement({
    
      isHidden: function(){
        var w = this.offsetWidth, h = this.offsetHeight,
        force = (this.tagName === 'TR');
        return (w===0 && h===0 && !force) ? true : (w!==0 && h!==0 && !force) ? false : this.getStyle('display') === 'none';
      },
    
      isVisible: function(){
        return !this.isHidden();
      }
    
    });
    

    http://gist.github.com/137880