Okay
  Public Ticket #944588
Loading dynamically data to data-end attribute
Closed

Comments

  •  2
    ebayconquermanager started the conversation

    Hello, I am trying to change dynamically the attribute data-end. As I get it from the server. I can’t figure out how to do it the right way so the animation will still work. Can you please help out? Thanks in advance, Eitan. 
    <div class="tile-stats tile-green">
    <div class="icon"><i class="entypo-chart-bar" /></div>
    <div class="num" data-start="0" data-end="135" data-postfix="" data-duration="1000" data-delay="0">0</div>

    <h3>Daily Visitors</h3>
    <p>this is the average value.</p>
    </div>

  • [deleted] replied

    Hello Eitan,

    Actually these "counter" widgets are initiated in Document start and to re-initialize again you need to create a function to start the animation again so here is the code for tile counter:


    (view large version)

    in neon-custom.js starting from line 1237 so here is an example:

    function countableElement( el ) {
    var $this = $(el),
        $num = $this.find('.num'),

        start = attrDefault($num, 'start', 0),
        end = attrDefault($num, 'end', 0),
        prefix = attrDefault($num, 'prefix', ''),
        postfix = attrDefault($num, 'postfix', ''),
        duration = attrDefault($num, 'duration', 1000),
        delay = attrDefault($num, 'delay', 1000),
        format = attrDefault($num, 'format', false);

    if(start < end)
    {
    if(typeof scrollMonitor == 'undefined')
    {
    $num.html(prefix + end + postfix);
    }
    else
    {
    var tile_stats = scrollMonitor.create( el );

    tile_stats.fullyEnterViewport(function(){

    var o = {curr: start};

    TweenLite.to(o, duration/1000, {curr: end, ease: Power1.easeInOut, delay: delay/1000, onUpdate: function()
    {
    $num.html(prefix + (format ? numberWithCommas( Math.round(o.curr) ) : Math.round(o.curr)) + postfix);
    }
    });

    tile_stats.destroy()
    });
    }
    }
    }