Adding commas to counter numbers

[lancesalyers]

page link: http://learningleader.com/

I have a group of counters on this page and need commas to be displayed. I tried using the code posted here (https://theme.co/apex/forum/t/adding-commas-to-counters/2450/6) to no effect.

Thanks!

[nabeel]

Hi @lancesalyers,

Thank you for reaching out to us. Try using this code instead 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++;
      }, 3000);
		}
	} else {
		console.log('out of view');
	}
});

I believe the section fade in effect is causing the trouble, If you turn off the fade effect for that section then you can reduce the SetTimeout delay i.e 3000 to a smaller value maybe 1000 or originally the 500 as in the previous code.

To learn more about timing functions please see https://www.w3schools.com/jsref/met_win_settimeout.asp

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Thanks!

[lancesalyers]

Thanks for the quick and thorough reply, Nabeel! Unfortunately, I’m not seeing any change. I removed the fade in effects of all columns on the page, including the row with the counters. I added the code you provided to the Global JS panel of the Theme Options, and I’ve reloaded the page using an incognito window to get a fresh browser cache.

No commas.

Thanks for your help!

[nabeel]

Hi again,

That must be the delay problem then. I see you’re currently using 500 for the timeout, try increasing it to 2000. Feel free to make adjustments in the delay value if it doesn’t work.

Let us know how this goes!

[lancesalyers]

That did it. Thanks!

[jade]

You’re most welcome, Lance.