Load Javascript when div is in viewport

Question

Thats the Div in HTML file

<div class="inViewport">

And this script should be loading only when the div is in viewport

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            ToxProgress.create();
            ToxProgress.animate();
        });
    </script>

Answer 1

This is what you should look at: Check if element is visible after scrolling

Here is an example for you that demonstrates this technique: http://jsfiddle.net/XYS2G/ - just try to scroll the Result window.

HTML:

<div class="indicators">
    <span class="indicator" data-id="section1">section1</span>
    <span class="indicator" data-id="section2">section2</span>
    <span class="indicator" data-id="section3">section3</span>
    <span class="indicator" data-id="section4">section4</span>
    <span class="indicator" data-id="section5">section5</span>
    <span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
    <div class="section" id="section6">section6</div>
</div>

CSS:

.indicators { position: fixed; }
.section { height: 150px; }

Javascript:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function refreshIndicators() {
    $('.indicator').each(function () {
        if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
            $(this).css('color', 'red');
        } else {
            $(this).css('color', 'black');
        }
    });
}

refreshIndicators();

$(window).bind('scroll', refreshIndicators);

Answer 2

Hello and thanks for the quick response. But I want to run the script when the div comes to viewport because there is an animation skill circle.

Thats my div with skill bar cirlce inlcuded

<div id="inViewport">

Thats the new script

<script type="text/javascript">
if (document.getElementById("inViewport")){
   ToxProgress.create();
   ToxProgress.animate();
}
</script>

Answer 3

Like this: But not working... sorry I am a noob

<script type="text/javascript">
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );

window.addEventListener("scroll resize", function() {
    if (isInViewport(document.getById("inViewport"))) {
       ToxProgress.create();
       ToxProgress.animate();
    }
});
</script>

Answer 4

I think this function will help you:

function isInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

(taken from here) Then, you need to listen to the scroll event, and every time the user scrolls, you check if the element is in the viewport by calling above function. Sample:

window.addEventListener("scroll resize", function() {
    if (isInViewport(document.getById("inViewport"))) {
       ToxProgress.create();
       ToxProgress.animate();
    }
});