Add commas (and dollar signs?) to counter

Support
#1

I have one line of counters on my website with four numbers.

Ideally, I’d like the four counters to have the following visual differences:

  1. A dollar sign and comma so it reads $300,000
  2. A dollar sign and commas so it reads $1,700,000
  3. Fine as is.
  4. Dollar sign and a decimal so it reads: $212.36

Here is the URL (in development)
https://genevalevy.bluehorsecreative.com/

Any ideas?

#2

Hi There,

Thanks for writing in! You can use the prefix and suffix options to add your currency sign. However adding additional parameters like commas is not possible at this moment.

Thanks!

#3

Thanks for the pre-fix info. I did see others have used javascript to add commas and decimals, but I couldn’t figure out how to alter it to make it work. Can you take another look?

#4

Hi again,

There is an easy work around, add the numbers behind the dot and/or comma in the suffix (with the dot or comma). Example: 30.000,00 USD would be shown like this: Ending number: “30”, Suffix: “.000,00 USD”. Only the first part will rotate, but it is good enough in most cases.

Cheers!

#5

Honestly, it looks fine for all but the $1,700,000 value. In which case, only the 1 rotates.

#6

Hi again,

You can place the comma elsewhere like 17,00,000

Hope this helps!

#7

If I placed the comma elsewhere, it wouldn’t represent one million seven hundred thousand dollars.

That’s now how numbers work.

You can’t just place a comma anywhere.

#8

Hey there,

Regretfully that’s the only possible solution currently.

Thank you for understanding!

#9

In other posts, you shared a javascript solution with others.

Can you help me with that javascript code?

#10

Hi There,

Try adding the following Javascript code into your page’s custom JS section.

jQuery(document).ready(function() {
	setTimeout(function() {
		var selector = jQuery('.home #x-section-2 .x-column:nth-child(2) .number');
		var theNumber = selector.text();
		theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		selector.text(theNumber);
	}, 300);
});

Thanks!

#11

Thanks for your help!

#12

You’re welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.