getBoundingClientRect - newbie questiion

Question

I'm trying to use the getBoundingClientRect following this: How to tell if a DOM element is visible in the current viewport?

But I can't make it working and I am obviously doing something wrong. Please tell me what.

HTML:

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="one">
Div "One"
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

JS:

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback();
            }
        }
    }
}

var handler = onVisibilityChange(el, function() {
document.getElementById("one").className="theone";
});

if (window.addEventListener) {
    addEventListener('DOMContentLoaded', handler, false); 
    addEventListener('load', handler, false); 
    addEventListener('scroll', handler, false); 
    addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
    attachEvent('onDOMContentLoaded', handler); // IE9+ :(
    attachEvent('onload', handler);
    attachEvent('onscroll', handler);
    attachEvent('onresize', handler);
}

Matus · Answer 1 · 2016-10-24T16:30:40.067

0

From your description it seems you are just missing declaration of the element you are trying to watch.

try adding at the top:

var el = document.getElementById("one");

EDIT: The problem with code above is in onVisibilityChange function. The variable old_visible is undefined thus the if statement:

if (visible != old_visible) {

will always be true the first runs. To fix this issue simply declare old_visible as isElementInViewport(el):

var old_visible = isElementInViewport(el);

That way your handler will be executed when the visibility changes.

PS: I don't know what is your aim here but if you want to execute the code only when the element is visible on screen you will have to change onVisibilityChange function.

edited Oct 24 '16 at 16:30

answered Oct 24 '16 at 15:24

Matus

1,408
12
15

Unfortunatly no, this didn't help. Here, I did a jsfiddle to show... maybe it will be more clear what am I doing wrong: https://jsfiddle.net/fspb7kkx/ – zwaar Oct 24 '16 at 15:35
The problem is in the function onVisibilityChange where old_visible variable is undefined. Declare it as follows: var old_visible = false; Also, please note the css of ID will be preferred to Class so the background colour will not be changed in your example. – Matus Oct 24 '16 at 16:11
I don't think it's because the old_visible, but I tried as you suggested - no result :/ And I know about the background color, if you look at the jsfiddle, there's a `.theone` class with black background and wight text color. But this isn't working for some reason... :/ – zwaar Oct 24 '16 at 16:30
I've changed my answer, the code is working in my browser (chrome 53) without any problem. Could you please describe what is the problem that you are experiencing? – Matus Oct 24 '16 at 16:32
Well... the problem is it doesn't add `theone` class when the `#one` become visible in the viewport. Can you please make a working example in jsfiddle so when the `#one` be visible, the `theone` class will be added to it? Because I tried declaring as you said with the old_visible and can't make it working. Thanks for helping me man – zwaar Oct 24 '16 at 17:28
try this: https://jsfiddle.net/kjkokmq0/ ? The problem with your solution is that you are comparing old visible to new visible but you don't need it if you are simply trying to detect when the element is in viewport. – Matus Oct 25 '16 at 08:16

getBoundingClientRect - newbie questiion

1 Answers1