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: display: none; visibility: hidden; one of the parents has display: no

Solution 1:

Stolen from http://snippets.dzone.com/posts/show/5757:

function isVisible(obj)
{
    if (obj == document) returntrueif (!obj) returnfalseif (!obj.parentNode) returnfalseif (obj.style) {
        if (obj.style.display == 'none') returnfalseif (obj.style.visibility == 'hidden') returnfalse
    }

    //Try the computed style in a standard wayif (window.getComputedStyle) {
        var style = window.getComputedStyle(obj, "")
        if (style.display == 'none') returnfalseif (style.visibility == 'hidden') returnfalse
    }

    //Or get the computed style using IE's silly proprietary wayvar style = obj.currentStyle
    if (style) {
        if (style['display'] == 'none') returnfalseif (style['visibility'] == 'hidden') returnfalse
    }

    return isVisible(obj.parentNode)
}

Solution 2:

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

Solution 3:

Looks like the isVisible method given above was included in the mootools more Element.Shortcuts.

However neither of these methods account for the scroll state of the browser. The following method seems to work pretty well for me for fulfilling requirement #5 stated in the original question.

Element.implement({
isFullyVisible: function() {
    if(this.isVisible()) {
        var coord = this.getCoordinates(),
            winScroll = window.getScroll();

        return winScroll.y <= coord.top;
    } else {
        returnfalse;
    }
}
});

Solution 4:

/**
 * Checks display and visibility of elements and it's parents
 * @param  DomElement  el
 * @param  boolean isDeep Watch parents? Default is true
 * @return {Boolean}
 *
 * @author Oleksandr Knyga <oleksandrknyga@gmail.com>
 */functionisVisible(el, isDeep) {
    var elIsVisible = true;

    if("undefined" === typeof isDeep) {
        isDeep = true;
    }

    elIsVisible = elIsVisible && el.offsetWidth > 0 && el.offsetHeight > 0;

    if(isDeep && elIsVisible) {

        while('BODY' != el.tagName && elIsVisible) {
            elIsVisible = elIsVisible && 'hidden' != window.getComputedStyle(el).visibility;
            el = el.parentElement;
        }
    }

    return elIsVisible;
}

Solution 5:

<scripttype="text/javascript">functionisObjVisibile(obj){

        return obj.offsetTop != -1;
    }
</script><inputtype=buttononclick="alert(isObjVisibile(document.getElementById('myTest')))"value='is visible'><inputtype=buttononclick="document.getElementById('test2').style.display = 'none';"value='hide'><divid='test2'><divid='myTest'>test</div></div>