Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
hnl.isVisible.js - jquery extension to check if an element is visible in the browser's viewport, demo: http://jsfiddle.net/49oownx6/111/
$.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