Adding commas to large numbers in Counter element in Pro

[daneruef]

Hello,

I am trying to follow the instructions in various support answers in order to add commas to large numbers in the Counter element, especially this one: https://theme.co/apex/forum/t/adding-commas-to-counters/2450/20

None of these are working for me, and I am wondering if this is not supported in Pro?

Thanks in advance for your help,

[nabeel]

Hi @daneruef,

Thank you for reaching out to us. As you see this particular customization requires custom development which is regretfully outside the scope of our support. The code shared the in the thread serves as a guide only and is to help you in getting started, it may or may not work with all updates of the theme however I can point you in a right direction. If you’re not using the Classic Counter element then you’d need to add the following JS script in the Theme Options > JS:

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(".x-counter-number").text();
				theNumber = theNumber.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				jQuery(this).find(".x-counter-number").text(theNumber)
			});
		  count++;
      }, 500);
		}
	} else {
		console.log('out of view');
	}
});

Please note that the selectors have changed from .number to .x-counter-number I’ve already made adjustments to the code. You can make adjustments to the Timeout value i.e 500 in the code as your need.

If your counter doesn’t need a page to be scrolled and it’s your first element in the view then you’d need this code:

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

You can experiment with the Timeout value and see which one works for you.

Please note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Thank you for understanding!