Commas to Counters

Hi @nabeel

I am trying to add a comma to my counters, I’ve tried the coding in other posts, which have not worked for me.

Appreciate your help

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

Hi Kelvin,

Thanks for reaching out.

The counter comma is now working fine on your end.

I added this code to your Pro > Theme Options > JS.

As you can see in the code below, I just got it from here and just modified the setTimeout from 500 to 2000 to wok on your website.

This code will work when the user scroll down to your counter section.

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++;
      }, 2000);
		}
	} else {
		console.log('out of view');
	}
});

And also this line of code, will work when the user refresh the page and display the counter section right away.

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

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.

That worked great thanks @cramaton

You’re welcome.

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