Jquery - Load function when page position seen

Question

I begin with jquery and I try to execute a function when my page position is seen.

Example with "http://www.jqueryscript.net/demo/Animated-Circle-Statistics-Plugin-With-jQuery-Canvas-Circliful/" :

<div id="myStat4" data-startdegree="180" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>

$(window).load(function() {
        $('#myStat4').circliful();
}

But it doesn't work, pourcentage circle are already completed when I scroll to my section. Have you got an idea to realize this action ?

Thank you

Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on [so]. See "[Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts). — John Saunders, May 25 '15 at 18:07
Are you saying you don't want the percentage circles to progress until they are scrolled into view? If so, I should have the answer for you. — Button 108, May 25 '15 at 19:11
It's exactly that I want Button 108. I want to start $('#myStat4').circliful(); only if user view my section. — Bouh, May 25 '15 at 20:42

score 0 · Answer 1 · edited May 23 '17 at 12:29

When the page complete loading, the animation should run:

    $(function() {
            $('#myStat4').circliful();
    });

Edit: But this doesnt wait till u scroll down, it start right after page load completes. So u need to change to add somethign like a sroll listener, somethign that trigger when the canvas is viewable.

Here are some ways to achieve event on whn an element is visible trough a scroll event

Triggering jquery event when an element appears on screen

score 0 · Accepted Answer · answered May 26 '15 at 00:37

circle=false;
function activateInView(){
    if(circle==false){
     if(  $('#myStat4').offset().top > $(window).scrollTop() ){
       $('#myStat4').circliful();
       circle=true; // this is so it doesn't keep activating as you keep scrolling
     }
    }
}

$(document).ready(function(){ //This fires when everything is loaded

  activateInView(); //Test here in case it's already in view

  $(window).scroll(function(){ // This checks again everytime you scroll
    activateInView();
  });

});

So this checks when you all the images and everything on the page finishes loading, then tries again everytime you scroll. You can adjust the math on the IF statement if you want it to scroll further before starting... As is, it will activate if only a little sliver of the top of the circle is showing.

If you have more than one, you may want to make the function loop on a for each with a class instead of an ID or something like that. Then you would also have to change the "circle true or false" part to make room for each separate stat.

Jquery - Load function when page position seen

2 Answers2