Check element viewport visibility in levels

Question

I need to check if a dom-elment is visible in the viewport in different "visibility levels". I know how to check if it's visible or not, but this time i need an indicator of how visible the element is. Think of it as 3 colors: Green, Yellow and Red. Where green is 100% visible and red is not visible at all.

Does anyone have any ideas on how to write jQuery or Javascript for this?

Edit: 0 to 100 would also be a great indicator. 0 is 0 % visible and 100 is 100% visible.

please post a code of what you've tried so far. Also why don't you use the alpha channel of `rgba` or the CSS property `opacity`? — Nico O, Mar 03 '14 at 12:22
I haven't tested anything yet, cause I don't know where to start. It's not about opacity, it's about an elements visibility. Let's say you have a huge paragraph of text and on a mobile device you can only see 50% of it in the viewport. — Axel, Mar 03 '14 at 12:34
then your question is really confusing. You can start with this: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport — Nico O, Mar 03 '14 at 12:36

score 1 · Accepted Answer · answered Mar 03 '14 at 12:49

Fortunately for you, I had to develop almost what you want. It's a jQuery extension that tells you how visible an element is relative to the browser window. It returns an object with two properties, horizontal and vertical. If vertical value is -1, then the element is invisible and over the viewport. If it is 0, then it's visible. If the result if 1, then invisible but under the viewport. Similarly for horizontal.

The difference is that '0' doesn't differentiate between 'completely in the viewport' or partially in the viewport. I needed it to determinate if something was above, in, or below the viewport (and the same for left and right). However, it's a good point to start and it can easily be changed to what you need.

    jQuery.fn.viewportPosition = function () {
        var $window = $(window);
        var position = this.offset();
        var viewport = { bottom: $window.height(), right: $window.width() };
        var rect = { top: position.top, left: position.left, bottom: position.top + this.height(), right: position.left + this.width() };
        return {
            vertical: (rect.bottom < 0) ? -1 : (rect.top > viewport.bottom) ? 1 : 0,
            horizontal: (rect.left < 0) ? -1 : (rect.left > viewport.right) ? 1 : 0
        };
    };

Check element viewport visibility in levels

1 Answers1