Skip to main content
kineticcreative123
kineticcreative123
Inspiring
January 29, 2019
Answered

Need help adding a $ to a animated js counter

  • January 29, 2019
  • 1 reply
  • 1223 views

Hi Everyone,

I am working on a counter for a landing page and need help adding a $ in front of the numbers. I tried adding it here in the from: and too: but it didn't work. 

<script>

  jQuery(function($) {

    $('.count').countTo({

        from: 0,

        to: 2.5,

        speed: 1300,

  decimals: 1,

  separator: '.'

    });

});

</script>

Any help would be appreciated.

Here is a link to the counter:

Animate Counting To Number Example

    This topic has been closed for replies.
    Correct answer osgood_

    kineticcreative123  wrote

    Hi Everyone,

    I am working on a counter for a landing page and need help adding a $ in front of the numbers. I tried adding it here in the from: and too: but it didn't work. 

    <script>

      jQuery(function($) {

        $('.count').countTo({

            from: 0,

            to: 2.5,

            speed: 1300,

      decimals: 1,

      separator: '.'

        });

    });

    </script>

    Any help would be appreciated.

    Here is a link to the counter:

    Animate Counting To Number Example

    Find the 2 lines below in the script:

    var newVal = value.formatMoney(options.decimals, options.separator) + 'M';

    $(_this).html(newVal);

    and change to:

    var newVal = value.formatMoney(options.decimals, options.separator);

    $(_this).html('$' + newVal);

    Edited - Might be better to use &dollar;

    $(_this).html('&dollar;' + newVal);

    1 reply

    O
    osgood_Correct answer
    Legend
    January 29, 2019

    kineticcreative123  wrote

    Hi Everyone,

    I am working on a counter for a landing page and need help adding a $ in front of the numbers. I tried adding it here in the from: and too: but it didn't work. 

    <script>

      jQuery(function($) {

        $('.count').countTo({

            from: 0,

            to: 2.5,

            speed: 1300,

      decimals: 1,

      separator: '.'

        });

    });

    </script>

    Any help would be appreciated.

    Here is a link to the counter:

    Animate Counting To Number Example

    Find the 2 lines below in the script:

    var newVal = value.formatMoney(options.decimals, options.separator) + 'M';

    $(_this).html(newVal);

    and change to:

    var newVal = value.formatMoney(options.decimals, options.separator);

    $(_this).html('$' + newVal);

    Edited - Might be better to use &dollar;

    $(_this).html('&dollar;' + newVal);

    kineticcreative123
    kineticcreative123Author
    Inspiring
    January 31, 2019

    Hi osgood,

    I have one more question. You helped me with this before but I can't figure how to take what you gave me and apply to this.

    I would like to get the animation to start on scroll when in view. You helped me do this on an SVG animation. I have updated the link below and gave the div some padding so you have to scroll to get to it.

    Animate Counting To Number Example

    O
    osgood_
    Legend
    January 31, 2019

    kineticcreative123  wrote

    Hi osgood,

    I have one more question. You helped me with this before but I can't figure how to take what you gave me and apply to this.

    I would like to get the animation to start on scroll when in view. You helped me do this on an SVG animation. I have updated the link below and gave the div some padding so you have to scroll to get to it.

    Animate Counting To Number Example

    Use the 'isInView' script we used last time and move your 'countTo' function into the window scroll function:

    <script>

    function isInView(elem) {

    var docViewTop = $(window).scrollTop();

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

    var elemTop = $(elem).offset().top;

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

    }

    $(window).scroll(function(){

    if (isInView($('.count'))) {

      jQuery(function($) {

        $('.count').countTo({

            from: 0,

            to: 2.5,

            speed: 1300,

      decimals: 1,

      separator: '.'

        });

    });

    $(window).off('scroll');

    }

    })

    </script>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices