Adding Commas to Counters

Support
#1

Hi Guys,

On the following site - http://298.e0e.myftpupload.com/testimonials__trashed/clients/

I have one counter that goes to 820556 and would like to add a comma so it displays 820,556

How do I do this?

Thanks - Skeeer

#2

hi @SkeeterHarris,

the way I am solving this, is by adding 820 as an Ending number, and ,556 as a Suffix.

As far as I know, there is no other way.

#3

Hello @Misho,

Thanks for the response but that’s definitely not going to give me the same look as the others, we will forgo the comma on the number.

Thanks and have a nice weekend - Skeeter

#4

Let us know if you need further help.

Thanks for the help Misho!

#5

On this topic I am fine on the Pro Header I am waiting for a response to my bug report - thanks

#6

Please kindly add the code below to the JS section of the page you added the numbers:

jQuery(document).ready(function() {
	setTimeout(function() {
		var selector = jQuery('#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);
});

Thank you.

1 Like
#7

@christopher.amirian

This is just AWESOME - THANK YOU!!!

#8

You’re most welcome.

#9

I tried adding this jQuery through the ‘customize > jQuery’ and it did not produce the desired results. If there is a way to add jQuery to a single page pls let me know the method.
Thank you,
Rob

#10

Hey Rob,

To add the script to a single page only, you can make use of JS section in Cornerstone (see screenshot), just paste the code in there.

Hope this helps!

#11

I tried adding this into the page and it didn’t work…I’m using the Integrity stack

#12

Hi,

You need to target the column that has your number.

Try to add a unique class to your column

Then change the js code to this.


jQuery(document).ready(function() {
	setTimeout(function() {
		var selector = jQuery('.x-column.my-column .x-counter-number');
		var theNumber = selector.text();
		theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		selector.text(theNumber);
	}, 300);
});

Hope that helps.

#13

Hi there,

I am trying to use this for my site as well, and the codes above are not working. Could you please take a look?

#14

Hello @Stigan,

Since you already followed my colleague’s advise with the custom class, kindly update your code with:

jQuery(document).ready(function() {
	setTimeout(function() {
		var selector = jQuery('.x-column.my-column .x-counter .number');
		var theNumber = selector.text();
		theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		selector.text(theNumber);
	}, 300);
});

Also, I can see X-XSS-Protection errors on the console:

For now, this will is acceptable as you’re still on dev site. If by chance you still see this errors on your live site, I suggest you contact your hosting provider to set X-XSS-Protection:0 in your server.

For more info about X-XSS-Protection:

Hope that helps.

#15

Hello we just moved our site to the client’s server and it’s now live, it seems like the issue still persists. Would you mind having another look now that it’s live ?

Thanks!

#16

Hi there,

Would you mind providing the URL of the live site?

I tried to check your account and you have a lot of licenses so I am not sure which is the site in question.

Thank you.

#17

yes of course, it’s now in the secured note

Thanks!

#18

Hi There,

Upon checking, I don’t see the Javascript code provided above on your site.

I have tested it by adding it to the JS console log and it should display changes properly (see secure note).

Thanks!

#19

Hello Mldarshana

Thanks for the reply, we deleted the code when we realized it wasn’t working

I’ve re added it now, but it still does not seem to have commas

Sorry for being such a pain, and thanks a bunch for your help

#20

Hi again,

I spent some time and added the following code in your site:

jQuery(document).ready(function() {
  count = 0;
});

function isScrolledIntoView(elem)
{
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top + 100;
    var elemBottom = elemTop + jQuery(elem).height();

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

jQuery(window).scroll(function(){
	var isElementInView = isScrolledIntoView(jQuery('.x-counter'));
	if (isElementInView) {
		if (count == 0) {
      setTimeout(function() {
			jQuery('.x-counter').each(function(){
				var theNumber =  jQuery(this).find(".number").text();
				theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				jQuery(this).find(".number").text(theNumber)
			});
		  count++;
      }, 500);
		}
	} else {
		console.log('out of view');
	}
});

I tested the code and it seems to be working now. Please clear your browser’s cache and reload the site.

Cheers!

Commas to Counters