Adding Commas to Counters

Stigan · March 29, 2018, 10:01pm

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?

jumar · March 30, 2018, 3:27am

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.

Stigan · April 9, 2018, 4:09pm

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!

jade · April 9, 2018, 5:50pm

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.

Stigan · April 9, 2018, 6:06pm

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

Thanks!

mldarshana · April 9, 2018, 9:12pm

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!

Stigan · April 10, 2018, 4:50pm

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

nabeel · April 10, 2018, 8:11pm

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!

Stigan · April 10, 2018, 8:27pm

this worked perfectly thanks Nabeel

Have a great day

nabeel · April 10, 2018, 8:44pm

Glad we could help.

Cheers!

Stigan · May 3, 2018, 7:22pm

Hi again,

I’ve tried using the latest code on one of my other sites and its not working. I added it into customizer. Could you please take a look for me? Thank you

nabeel · May 3, 2018, 8:47pm

Hi @Stigan .

Thanks for writing back! I went ahead and made some adjustments, I increased the timeout value and it seems to be working fine now. Please clear your browser’s cache and reload the site.

Cheers!

Stigan · May 4, 2018, 2:37am

Thank you!

lely · May 4, 2018, 4:41am

You are always welcome.

Cheers.

Emperor · March 14, 2019, 10:11pm

I tried every solution here and none work. Is it different for the Pro version?

nabeel · March 14, 2019, 11:04pm

Hi @Emperor,

Thank you for reaching out to us. I checked your page that has the counter and it needs a different approach since your front page doesn’t need scrolling to get to the counter element. It’s visible on the page load so you can try this code instead:

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

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

kawindsor · September 19, 2020, 7:09am

Hi

I’ve tried all of the coding above on my site, but none seem to work in adding a comma into my counter.

Is someone able to have a look at it?

This is one of my pages that has the counter - http://35.201.4.103/health/

marc_a · September 19, 2020, 8:24am

Hi Kelvin,

Thanks for reaching out.

The reason why the code is not working on your end because the CSS selector you use is ".number" it should be ".x-counter-number" as given by my colleague. Please update your code and it will be working.

Your CSS selector in your code here:

should be match on the pre-define CSS here:

Please note that custom development is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps.

Thank you.

kawindsor · September 19, 2020, 8:44am

Hi @cramaton,

Thanks for that, I’ve updated the code and, made sure the column and counter are being targeted correctly, it still is not working

marc_a · September 19, 2020, 8:56am

Hi Kelvin,

I suggest that you create a new ticket to assist you better, check it here on how to create a new one:
Creating a new ticket

And on the new ticket, please give us the following information in a Secure Note.

WordPress Login URL
Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.