Commas in counter element

Support
#1

I tried JS from 2 different support forum posts refered here https://theme.co/apex/forum/t/adding-commas-to-counter-numbers/46205/3 but doesn’t seem to be working. I have counters mid way down on the homepage, 2nd set has long numbers but still no commas.
any thoughts? i did look for another counter plugins that would work in cornerstone but no luck.

#2

Hi @designbabe,

I’ve updated the custom JS to this:

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

Everything is working fine now.

Please note that: the v2 of counter element has change the text class to .number instead of .x-counter-number.

Cheers!

1 Like
#3

Awh ok, that worked!
thanks so much
have a great day

#4

You are most welcome. :slight_smile:

#5

HI Prasent
I had to update my numbers and then the commas disappeared? thoughts on what happened and how to fix?
thanks

#6

Hi @designbabe,

I checked and the commas are still there.

Try to clear your browser cache and check again.

Thanks

#7

sorry you are correct worki`ng now

#8

If you need anything else, feel free to create another ticket.

#9

Hi thai,
I had one question related to this ticket, i guess the issue is my colleague doesn’t really like that there is a bit of a delay in having the commas appear is there anything we can do about that? to make them not be delayed

#10

Hey @designbabe,

That’s due to the setTimeout delay in the code set to 3000 ms which is equal to 3s (see screenshot)

You can change it to 1000 or adjust the delay as per your need. Don’t forget to clear all caches including your browser’s cache after updating the code. Let us know how this goes!

#11

hi, it seems that there is not a comma in the first and last numbers (44, 659 and 2,254). Did it break bc i edited them or is there something wrong. And the comma seems to just show up til the end w delay…I cleared cache and did in incognito window.

#12

Hi @designbabe,

I tried it and it’s glitchy, that’s because the number itself has its own animation and you’re interfering it with the above script. I tried some workaround and no luck, it may work on some setup and may now depending on the delay of loading or rendering.

There is an existing executing code that changes the number, then you have added another script that changes it again and they are both not in sync. I recommend contacting a developer for customization of this code, the idea is the same but he may able to do it with event listener instead of setTimeout.

Thanks!

#13

Hi Rad,
is there any other counter element available in X or one you could recommend? if not i"ll contact the developer
thanks

#14

Hi @designbabe,

I did a search but couldn’t find any plugins support commas in counter.

You should contact to a developer to help you with this.

Regards!

#15

thanks I will

#16

Glad we could help,

Cheers!

#17

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