Skip to main content
Stack Overflow for Teams is now Stack Internal: See how we’re powering the human intelligence layer of enterprise AI. Read more >
Second iteration [<https://en.wiktionary.org/wiki/another#Determiner> <https://en.wikipedia.org/wiki/WebKit>].
Source Link
Peter Mortensen
  • 31.4k
  • 22
  • 110
  • 134

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enotheranother) or screen edges

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac WebkitWebKit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtual machine), and Safari (Windows/Mac/iOS).

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac Webkit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtual machine), Safari (Windows/Mac/iOS)

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over another) or screen edges

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac WebKit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtual machine), and Safari (Windows/Mac/iOS).

Copy edited. Replaced TABs with spaces. In English, the subjective form of the singular first-person pronoun, "I", is capitalized, along with all its contractions such as I'll and I'm.
Source Link
Peter Mortensen
  • 31.4k
  • 22
  • 110
  • 134

After all, none of examples suits me, so iI wrote my own.

Tests (no support of IE filter:alphaInternet Explorer filter:alpha):

a) checkCheck if the document is not hidden

b) checkCheck if an element has zero width / height / opacity or display:none display:none / visibility:hiddenvisibility:hidden in inline styles

c) checkCheck if the center (also because it is faster than testtesting every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden overflow:hidden / scroll / one element over enother) or screen edges

d) checkCheck if an element has zero width / height / opacity or display:none display:none / visibility:hidden in computed styles (among all ancestors)

Android 4.4 (Native browser/Chrome/Firefox), Firefox (WinWindows/Mac), Chrome (WinWindows/Mac), Opera (Win PrestoWindows Presto/Mac Webkit), IEInternet Explorer (IE5Internet Explorer 5-11 document modes + IE8Internet Explorer 8 on a virtual machine), Safari (WinWindows/Mac/iOS)

After all, none of examples suits me, so i wrote my own.

Tests (no support of IE filter:alpha):

a) check if document is not hidden

b) check if element has zero width / height / opacity or display:none / visibility:hidden in inline styles

c) check if the center (also because it faster than test every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

d) check if element has zero width / height / opacity or display:none / visibility:hidden in computed styles (among all ancestors)

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Win/Mac), Chrome (Win/Mac), Opera (Win Presto/Mac Webkit), IE (IE5-11 document modes + IE8 on virtual machine), Safari (Win/Mac/iOS)

After all, none of examples suits me, so I wrote my own.

Tests (no support of Internet Explorer filter:alpha):

a) Check if the document is not hidden

b) Check if an element has zero width / height / opacity or display:none / visibility:hidden in inline styles

c) Check if the center (also because it is faster than testing every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

d) Check if an element has zero width / height / opacity or display:none / visibility:hidden in computed styles (among all ancestors)

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac Webkit), Internet Explorer (Internet Explorer 5-11 document modes + Internet Explorer 8 on a virtual machine), Safari (Windows/Mac/iOS)

Source Link
Aleko
  • 970
  • 1
  • 9
  • 10

After all, none of examples suits me, so i wrote my own.

Tests (no support of IE filter:alpha):

a) check if document is not hidden

b) check if element has zero width / height / opacity or display:none / visibility:hidden in inline styles

c) check if the center (also because it faster than test every pixel / corner) of element is not hidden by other element (and all ancestors, example: overflow:hidden / scroll / one element over enother) or screen edges

d) check if element has zero width / height / opacity or display:none / visibility:hidden in computed styles (among all ancestors)

Tested on

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Win/Mac), Chrome (Win/Mac), Opera (Win Presto/Mac Webkit), IE (IE5-11 document modes + IE8 on virtual machine), Safari (Win/Mac/iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

How to use:

is_visible(elem) // boolean