Hi and thanks for reading me. I am using a Jquery function to count numbers but I would like to add commas to the numbers (in addition to a prefix), but I can’t find a way to do it so far. I tried using formatter: function (value, options) {return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g,",");
but it doesn’t work yet. 🙁
My code is the following:
Main.js file:
$('.count-item').each(function(i) {
$(this).appear(function() {
var number = $(this).find('.count-to').data('countto');
$(this).find('.count-to').countTo({from: 0, to: number, speed: 1500, refreshInterval: 10, formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g, ",");
}
});
});
});
plugins.js file:
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 500, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
formatter: function (value, options) {
return value.toFixed(options.decimals).replace(/B(?=(d{3})+(?!d))/g, ",");
}
};
})(jQuery);
Index.html file:
<div class="count-item mb-sm-40">
<div class="count-icon"><span class="icon-piechart"></span></div>
<h3 class="count-to font-alt" data-countto=100></h3>
<h5 class="count-title font-serif">Siniestralidad (%)</h5>
</div>
Anyone know what I could do about it or if there is a solution? I can’t find anything until now
Thanks for the help