Thanks Nectar, I didn't use the "onUpdate". Below is the code I used and it seems to work. 

/***************** Milestone Counter ******************/
    if(!$('body').hasClass('')) {
        $('.nectar-milestone').each(function() {
            $(this).appear(function() {
                var $endNum = parseInt($(this).find('.number').text());
                $(this).find('.number').countTo({
                    from: 0,
                    to: $endNum,
                    speed: 1500,
                    refreshInterval: 30,
                    formatter: function (value, options) {
                    return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
                    }
                });
            },{accX: 0, accY: 0});
        }); 
    }
    

I'm trying to same thing.

I've dequeued the script from Salient and enqueued my own version (nectar-milestone2), added onUpdate and I'm seeing no added commas. Any idea what I'm doing wrong?

I receive this error in Chrome's inspector:

Uncaught TypeError: undefined is not a function

Which is referring to the line underneath //animation:

$(this).appear(function() {

	$('.nectar-milestone2').each(function() {
		//symbol
		if($(this).has('[data-symbol]')) {
			if($(this).attr('data-symbol-pos') == 'before') {
				$(this).find('.number').prepend($(this).attr('data-symbol'));
			} else {
				$(this).find('.number').append($(this).attr('data-symbol'));
			}
		}
	});
	if(!$('body').hasClass('mobile')) {
		$('.nectar-milestone2').each(function() {
			//animation
			$(this).appear(function() {
				var $endNum = parseInt($(this).find('.number span').text());
				$(this).find('.number span').countTo({
					from: 0,
					to: $endNum,
					speed: 1500,
					refreshInterval: 30,
					formatter: function (value, options) {
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					},
            		onUpdate: function (value) {
		                if(this.innerText) // firefox doesn't support innerText
		                {
		                    this.innerText = newVal;
		                } else {
		                    this.textContent = newVal;
		                }
			        }
				});
			},{accX: 0, accY: 0});
		}); 
	}

Any help would be awesome, thanks!

Nathan

Oh, I changed the divs back to nectar-milestone. But it still doesn't work.

I added the onUpdate function above with meaningless content inside because it seems to require onUpdate. Not sure how the author of this post resolved it, but it seems to make no difference to me. Likely because of the error I mentioned (Uncaught TypeError: undefined is not a function).

Here is the code I've added to the child theme's functions.php:

function milestone_deregister_and_register(){
    wp_deregister_script('nectar-milestone');
    wp_enqueue_script( 'nectar-milestone2', get_template_directory_uri() . '/js/init.js', array(), '1.0', true );
}
add_action( 'milestone_deregister_and_register', 100 );

The /js/init.js I'm calling is the one I've shown you in my previous post. I can't work out why it seems unable to identify 'nectar-milestone2' when I'm enqueuing it here. If you can point me in the right direction I would be extremely grateful. Thanks Tahir!

I've just disabled it for now.

Can I suggest commas in milestones as a feature request for the future? :)

Ugh I took 15 minutes to have a look this morning sadly I can't concentrate more time on it but maybe you can finalise it by yourself so here is my solution

Add this function in the milestone code block:

	function numberWithCommas(x) {
		var parts = x.toString().split(".");
		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
		return parts.join(".");
	}

Then in I edited the milestone counter to the following:

if(!$('body').hasClass('mobile')) {
		
		$('.nectar-milestone').each(function() {
			//animation
			$(this).appear(function() {
				var $endNum = parseInt($(this).find('.number span').text());
				$(this).find('.number span').countTo({
					from: 0,
					to: $endNum,
					speed: 1500,
					refreshInterval: 30,
					onUpdate: function (value) {
						var newVal = numberWithCommas(value);
						if (this.innerText) {
							this.innerText = newVal;
						} else {
							this.textContent = newVal;
						}
					}
				});
			},{accX: 0, accY: 0});
		}); 
	}

For now it does what it does but because the numberWithCommas functions stringifies the value you need a way to round the number. cause it will now show it like the following image does:

But it does work for most numbers it just sometimes does this when the number has so many different numbers

Could someone tell me where to specifically add these code blocks? I'm hoping to be able to display numbers bigger than just three digits, with commas. Thank you!!

OK thank you Tahir!

This seems to do the trick for me. Hopefully will help someone else.

 //activate$(\'.nectar-milestone\').each(function() {//animationvar $offset = ($(this).hasClass(\'motion_blur\')) ? \'90%\' : \'105%\';$(this).waypoint(function(direction) {var $endNum = parseInt($(this).find(\'.number span:not(.symbol)\').text());if(!$(this).hasClass(\'motion_blur\')) {$(this).find(\'.number span:not(.symbol)\').countTo({from: 0,to: $endNum,speed: 1500,refreshInterval: 30,formatter: function (value, options) {    value = value.toFixed(options.decimals);    value = value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \',\');    return value;}

Hi  I what to put decimal and comma separators to the milestone counter. How can I do that and where to put this code  

activate$(\'.nectar-milestone\').each(function() {//animationvar $offset = ($(this).hasClass(\'motion_blur\')) ? \'90%\' : \'105%\';$(this).waypoint(function(direction) {var $endNum = parseInt($(this).find(\'.number span:not(.symbol)\').text());if(!$(this).hasClass(\'motion_blur\')) {$(this).find(\'.number span:not(.symbol)\').countTo({from: 0,to: $endNum,speed: 1500,refreshInterval: 30,formatter: function (value, options) {    value = value.toFixed(options.decimals);    value = value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \',\');    return value;}

Can you not just replace content with CSS? For example:

.nectar-milestone .number span{
display: none;
}

.nectar-milestone .number:after {
content: '1,500,000';
}

Has anyone solved this problem? Decimals still only show on mobile, but not on desktop (using Salient 8.5.3).

I tried all the JS snippets below but haven't solved the issue so far.

Thanks.

Solution is easy (at least I didn't find any downsides)

If u r using Salient

1, Open: \wp-content\themes\salient\js\init.js

2, Go to line #2404

3, Change:

var $endNum = parseInt($that.find('.number span:not(.symbol)').text().replace(/,/g , ''));

to:

var $endNum = parseFloat($that.find('.number span:not(.symbol)').text().replace(/,/g , ''));
if ($endNum != Math.floor($endNum)) {
    var $showDecimal = 1;
} else {
    var $showDecimal = 0;
}

4, Couple lines below find this:

var numAnim = new CountUp($countEle, 0, $endNum,0,2.2,countOptions);

and change like this:

var numAnim = new CountUp($countEle, 0, $endNum,$showDecimal,2.2,countOptions);

5, Save file and send it to FTP (probably you will need to refresh couple of time your browser or clear cache but it should work.

Now, if you put for ex. 99.8 it will count with decimal up to 99.8, if you set value to for ex. 95 it will not show decimals.

If you would like to always count with decimal even if value is for ex. 95, just skip this part of code in step 3:

if ($endNum != Math.floor($endNum)) {
    var $showDecimal = 1;
} else {
    var $showDecimal = 0;
}

and in step 4 keep original code and just change 0 to 1 after $endNum

var numAnim = new CountUp($countEle, 0, $endNum,1,2.2,countOptions);

It's kind of shame that it wasn't been fixed for last 4 years, but maybe there are some kind of downsides with this fix. If so please let me know.

ps. I didn't needed decimals in bar countdown so I didnt fixed it but I think that should be similar.