Skip to content

Instantly share code, notes, and snippets.

@ncou
Forked from c-kick/hnl.isVisible.js
Created July 2, 2017 08:49
Show Gist options
  • Save ncou/8daf00cd87d858a954fd83d874313342 to your computer and use it in GitHub Desktop.
Save ncou/8daf00cd87d858a954fd83d874313342 to your computer and use it in GitHub Desktop.
hnl.isVisible.js - jquery extension to check if an element is visible in the browser's viewport
$.fn.isVisible = function() {
// Am I visible?
// Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the
// essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such.
// That is why either width or height have to be > 0.
var rect = this[0].getBoundingClientRect();
return (
(rect.height > 0 || rect.width > 0) &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment