How to show data only when in viewport

Question

I'm planning to use a jQuery plugin called charts.js for graphs and charts. However, on a larger page, the animations of those graphs get completed even before the user sees them.

My question is, how do we fade in the content of a particular div/section only when it is visible inside the viewport as exactly depicted on charts.js website. The content fades in sequentially as we scroll down and hence even the animations of the graphs aren't missed. How can I achieve this with the help of jQuery?

You can use jQuery to check if items a div is within the confines of the window and then load the data with ajax, or if you have loaded everything on Page Load you can simply `fadeIn()` the elements. — Nunners, Oct 22 '13 at 12:41

rusmus · Accepted Answer · 2013-10-22T13:01:09.930

2

Take a look at this jsFiddle. The author fades in boxes as they become visible. You porbably need to call chart.js to create the graphs as they become visible, rather than just fade them in (that is if you want the fancy graph animations, rather than just a fade-in :-)) I have tweaked the fiddle and included it below:

$(document).ready(function() {    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){    
        /* Check the location of each desired element */
        $('.graph').each( function(i){            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                //Code to initialize the graph here.
                //This initialization should probably
                //be deferred, to ensure performance,
                //and the graphs should be marked as
                //initialized so we dont't init them
                //multiple times (possibly by changing
                //their class so .each ignores them).
            }            
        });     
    });    
});

edited Oct 22 '13 at 13:01

answered Oct 22 '13 at 12:46

rusmus

1,665
11
18

This is exactly what I wanted and was about to use before Luke's reply appeard, lol. Shall work out on both the solutions and appropriately select the perfect answer :) – nimsrules Oct 22 '13 at 12:50
It should be noted the differences between `position` and `offset` in jQuery, if using absolute and relative positioning in CSS it can cause varied results. View this [SO Answer](http://stackoverflow.com/a/3202038/1941466) for more information on the differences – Nunners Oct 22 '13 at 12:50
You shouldn't do that much logic in a scroll callback as the event is fired very often during a scroll. Most of the time you're only interested in the last value (the current position), so you should definitely defer the computation. – nietonfir Oct 22 '13 at 12:50
@nietonfir if you are referring to the graph initialization, I agree. I hadn't thought of that and will add a comment. Other than that I think you would need quite a lot of graphs before the rest becomes a problem would you agree? – rusmus Oct 22 '13 at 12:57

score 0 · Answer 2 · answered Oct 22 '13 at 12:41

0

Mika's Viewport Selectors plugin works for the browser window viewport and not html elements. In other words if you got some css like #container{width:350px;height:150px;overflow:auto;} it will not work when scrolling.

I recommend trying his other plugin, Lazy Load

Here's an example: http://jsbin.com/efazos/1/edit

answered Oct 22 '13 at 12:41

Luke Rixson

607
5
20

I'm aware of the LazyLoad plugin Luke but does the JS generated content too loads lazily? I might have to check! – nimsrules Oct 22 '13 at 12:49
Yes they do, I'm pretty sure of it. – Luke Rixson Oct 23 '13 at 06:36

score 0 · Answer 3 · answered Oct 22 '13 at 12:48

The following code will enable you to determine whether an element is within the window on the scroll of the document. From there you can enable your chart and do whatever animations you like :

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('scroll', function() {
        //Get Div 1's Top and Left offsets from the Document.
        var divTop = $('#div1').offset().top;
        var divLeft = $('#div1').offset().left;
        //Get the current window height and width.
        var winHeight = $(window).height();
        var winWidth = $(window).width();

        if (divPos <= winHeight && divLeft <= winWidth) {
            //Div is visible in window

            //Fade in Chart
        }
    });
});
</script>

How to show data only when in viewport

3 Answers3

Linked