Fire jquery animation when scrolled to

Question

Im using some jquery to animate a bar graph but it is far enough down the page that the user will need to scroll to see it.

How do I set it to animate when the user has scrolled to its location.

arrayOfDataMulti = new Array(
        [[936656,556247],'2005'],
        [[913318,453238],'2006'],
        [[921707,362327],'2007'],
        [[894496,376587],'2008'],
        [[738624,326656],'2009'],
        [[759379,311336],'2010'],
        [[746972,332962],'2011'],
        [[666210,295708],'2012'],
        [[568817,286204],'2013'],
        [[548247,315037],'2014']

    );  

arrayOfDataMultiForSort = new Array(
        [[936656,556247],'2005'],
        [[913318,453238],'2006'],
        [[921707,362327],'2007'],
        [[894496,376587],'2008'],
        [[738624,326656],'2009'],
        [[759379,311336],'2010'],
        [[746972,332962],'2011'],
        [[666210,295708],'2012'],
        [[568817,286204],'2013'],
        [[548247,315037],'2014']
    );  

arrayOfColors = new Array('#006446','#6ebd44');

$('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors,legends: ['Scope 1 / Direct','Scope 2 / Indirect'],

legend: true });

$('#multiMulti').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, type: 'multi' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; type: 'multi'");               
});

$('#multiLegend').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, legend: true, legends: ['ads','leads','google ads'] });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; legends: ['ads','leads','google ads'],<br />&nbsp;&nbsp; legend: true");               
}); 



$('#multiSortDesc').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMultiForSort, colors: arrayOfColors, sort: 'desc' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; sort: 'desc'");                
});

$('#multiPrePost').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, prefix: '$', postfix: 'k' });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; prefix: '$',<br />&nbsp;&nbsp; postfix: 'k'");             
}); 

$('#multiHideValues').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, showValues: false });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; showValues: false");               
}); 

$('#multiNoAnimate').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, animate: false });
    $('#multiDyn').html(",<br />&nbsp;&nbsp; animate: false");              
});         

$('#multiClear').click(function(){
    $('#exampleMulti').html('');
    $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors });
    $('#multiDyn').html("");                
}); 
</script>

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

Will this answer serve your purposes?

function isScrolledIntoView(elem)
{
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

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

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

If not, there are some other good answers in that thread, including jQuery's $().appear() function.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 15 '15 at 20:33

user1717828

7,122
8
34
59

Thanks so much. That is probably the answer. My problem is Im not exactly sure how to implement it with my existing jquery. – double_cola Sep 15 '15 at 20:44
I assume I fire it by adding $(window).scroll(function(){ if (isScrolledIntoView($('#exampleMulti'))) – double_cola Sep 15 '15 at 21:11

Fire jquery animation when scrolled to

1 Answers1