Crestron Components Lib - Showcase App

Utility function subscribeInViewportChange

Utilify function subscribeInViewPortChange

subscribeInViewPortChange(el:HTMLElement, callback):void

el is a HTMLElement that can be observed when enters or leaves the viewport

callback to be executed when the element enters or leaves the viewport callback params el: HTMLElement, isInViewport: boolean

Preview

See the JS tab for the code

Here it will be displayed if the element with id #first is in viewport or not

Here it will be displayed if the element with id #second is in viewport or not

HTML
JS
CSS

<p>See the JS tab for the code</p>

<div class="mb bordered">
    <p id="first"></p>
</div>

<div class="mb">
    <ch5-image
        id="ex1-img"
        refreshRate="5"
        class="img"
        appendclasswheninviewport="image_is_in_viewport"
        url="https://picsum.photos/200/300/?random">
    </ch5-image>
</div>

<div class="mt80 mb">
    <p>Here it will be displayed if the element with id #first is in viewport or not</p>
    <p id="firstResult" class="result"></p>
</div>

<div class="mb bordered">
    <p id="second"></p>
</div>

<div class="mt80">
    <p>Here it will be displayed if the element with id #second is in viewport or not</p>
    <p id="secondResult" class="result"></p>
</div>

(function($, CrComLib){

    var firstEl = document.querySelector('#first');
    var secondEl = document.querySelector('#second');
    
    var firstResultEl = document.querySelector('#firstResult');
    var secondResultEl = document.querySelector('#secondResult')
    
    firstEl.innerHTML = "Scroll up and down to enter/exit the viewport";
    secondEl.innerHTML = "Scroll up and down to enter/exit the viewport";

    var firstCallback = function(element, isInViewPort) { 
        if (isInViewPort) {
            firstResultEl.innerHTML = 'Element with id #first is in viewport';
            console.log('Element with id #first is in viewport');
        } else {
            firstResultEl.innerHTML = 'Element with id #first is not in viewport';
            console.log('Element with id #first is not in viewport');
        }
    };
    
    CrComLib.subscribeInViewPortChange(firstEl, firstCallback);

    var secondCallback = function(element, isInViewPort) { 
        if (isInViewPort) {
            secondResultEl.innerHTML = 'Element with id #second is in viewport';
            console.log('Element with id #second is in viewport');
        } else {
            secondResultEl.innerHTML = 'Element with id #second is not in viewport';
            console.log('Element with id #second is not in viewport');
        }
    };
    CrComLib.subscribeInViewPortChange(secondEl, secondCallback);
    
})(jQuery,CrComLib);

.mb {
    margin-bottom:25px;
}

.result {
    color: red;
}

.mt80 {
    margin-top: 80%;
}

.bordered {
    border: solid 2px blue;
}

Execute JS before HTML