Highlighted

Need help adding a $ to a animated js counter

Contributor ,
Jan 29, 2019

Copy link to clipboard

Copied

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

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);

Views

426

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help adding a $ to a animated js counter

Contributor ,
Jan 29, 2019

Copy link to clipboard

Copied

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

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);

Views

427

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 29, 2019 0
LEGEND ,
Jan 29, 2019

Copy link to clipboard

Copied

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);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Contributor ,
Jan 29, 2019

Copy link to clipboard

Copied

Thanks you osgood!! Works perfect!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 29, 2019 0
Contributor ,
Jan 31, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2019 0
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2019 0
Contributor ,
Jan 31, 2019

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2019 0
LEGEND ,
Jan 31, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2019 0
Contributor ,
Jan 31, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 31, 2019 0