Need help adding a $ to a animated js counter

[kineticcreative123]

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

[osgood_ · Accepted solution]

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]

Thanks you osgood!! Works perfect!

[kineticcreative123]

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

[osgood_]

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>

[kineticcreative123]

Thank you. I got it to work. I saved your script for this. I didn't realize it was something standard I could re-use.

You are the best!!

[osgood_]

kineticcreative123  wrote

Thank you. I got it to work. I saved your script for this. I didn't realize it was something standard I could re-use.

You are the best!!

You still have the other 'countTo' function script after the link to your jQuery library. You should replace that with the 'isInView' function script, not at the bottom of the page, as you currently have it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

  <script>

  jQuery(function($) {
  $('.count').countTo({
  from: 0,
  to: 2.5,
  speed: 1300,
  decimals: 1,
  separator: '.'
  });
});
</script>

[kineticcreative123]

Perfect thank you. Moved the script from the bottom and placed it under the link.