I have a simple script for a counter which starts from a number 'a' and loops till a number 'b'.. The counter is working absolutely fine, all I need is to add a simple image to each digit of the counter.
This is the script:
(function ($) {
$.fn.countTo = function (options) {
options = $.extend({}, $.fn.countTo.defaults, options || {});
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,
to: 100,
speed: 1000,
refreshInterval: 100,
decimals: 0,
onUpdate: null,
onComplete: null,
};
})(jQuery);
I've customized it with my css (css below):
.countup {
text-align: right;
}
.total, .today {
color: #0A1927;
font-size: 52px;
font-weight: 200;
letter-spacing: 24px;
padding-left: 2px;
}
.dsh {
background: transparent url('../img/dash.png') repeat-x;
border-image-slice: 30;
background-size: 50px 60px;
margin-left: 5px;
margin-right: 5px;
}
below is a section of my aspx page:
<pre lang="xml"><header>
<div class="container">
<script type="text/javascript">
jQuery(function ($) {
$('.total').countTo({
from: 0,
to: "<%= totcount %>",
speed: 1000,
refreshInterval: 50,
onComplete: function (value) {
console.debug(this);
}
});
});
jQuery(function ($) {
$('.today').countTo({
from: 0,
to: "<%= todaycount %>",
speed: 1000,
refreshInterval: 50,
onComplete: function (value) {
console.debug(this);
}
});
});
</script>
<div>
<h2 class="countup">total <span class="dsh total"></span></h2>
<h2 class="countup">today <span class="dsh today"></span></h2>
</div>
</div>
</header>
But it does not give the desired result!! I know I am trying to achieve this in the poorest way possible! I have no idea how to include bg in jquery itself.. Any help would be appreciated...
output link :
http://www33.zippyshare.com/v/55761207/file.html[
^]
p.s. totcount and todaycount are values from codebehind!! You can replace it with a number if you test it!! Thanks