CODEWITHSUNDEEP
jqueryjquery-waypoints
user3742281
user3742281

Reputation: 11

Trigger circliful with waypoints

I am trying to trigger a circliful graph using waypoints. i want the animation to start at a certain waypoint. Bud the graph only appears at the waypoint, and is not visible when waypoint is not yet reached. this is the jquery: 

$(document).ready(function() {
    $('#waypointDiv').waypoint(function() {
        $('#graph1, #graph2, #graph3').circliful()  
    },
    {
        offset: 'bottom-in-view',
        triggerOnce: true
    });
});

Anybody that can help me out?

Upvotes: 1

Views: 943

Answers (2)

lee
lee

Reputation: 141

Just a modification to Jamie's answer. If you have multiple graphs with the same class and they might be in view when the document is ready this should work...

$('.circles').each( function() {
    var $this = $(this);
    var isGraph1Viewed=false;
    $(document).ready(function() {
        if(isScrolledIntoView($this) && isGraph1Viewed==false){$this.circliful();isGraph1Viewed=true;}
    });
    $(window).scroll(function() {
        if(isScrolledIntoView($this) && isGraph1Viewed==false){$this.circliful();isGraph1Viewed=true;}
    });
});

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height() - 20; //the 20 is the amount pixels from the bottom
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
}

Upvotes: 0

Jamie Calder
Jamie Calder

Reputation: 959

This was how I got this to work. Probably not the best way to do it, but it worked.

I created a function that checked to see if the chart had come into view that is fired as the user scrolls down the page. Once the chart is in view, I call the function to draw the chart. I added a bool in there to keep it from drawing over and over.

$(function(){
    var isGraph1Viewed=false;

    $(window).scroll(function() {   
       if(isScrolledIntoView($('#graph1')) && isGraph1Viewed==false){$('#graph1').circliful();isGraph1Viewed=true;}
    });

    function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height() - 20; //the 20 is the amount pixels from the bottom to consider the element in view
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom < docViewBottom) && (elemTop > docViewTop));
    }
});

I was going to fiddle it for you, but there's no CDN for circliful, but if you need a working example, let me know, and I can put one up on my own site.

Upvotes: 1

Related Questions