How to tell if an element is visible in the viewport AND takes up the entire viewport?

Question

I found this solution here: https://stackoverflow.com/a/7557433/5628

However, this is only for determining whether an element is visible within the viewport.

Instead: What I am attempting to do is slightly different in that I would like to determine whether the element takes up the entire viewport.

Answer 1

check if element top and left are smaller or equal to current scroll or viewport position, and if element height and width is equal or larger then viewport

Answer 2

You'll need to adjust the code a bit, but this works perfectly using a tiny bit of jQuery:

$(window).resize(function () {
    myFun.elementBiggerThanViewportCallback();
});

myFun.elementBiggerThanViewport = function (el) {

    //special bonus for those using jQuery
    if (el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top <= 0 &&
        rect.bottom >= (window.innerHeight || document.documentElement.clientHeight)
    );
}

elementBiggerThanViewportCallback = function (el) {
    var ifBigger = tabccordion.elementBiggerThanViewport(el);
    // Do stuff here.
}