I work at MindTouch and earlier today I started looking around the web for an animated jQuery number ticker to display the real-time page views with ajax. After searching for a while I wasn’t able to find anything so I thought I might try to build one.

With jQuery it wasn’t too challenging and I was able to develop the ticker in no time at all. The script is flexible and adjusts to the number of digits in the number. It also adds commas to properly format the number. You can see how the ticker looks here displaying the number 786554 – .

The jQuery code creates and removes the digits as needed and of the css is responsible for positioning the digits. The ticker is animated with jQuery which adds a nice touch. I got the number comma formatting from mrededkj.com. You’ll also need the following image that I created.

View the live Demo here at http://developer.mindtouch.com/User:Howleyda/Plain_Ticker.

Markup

<div class="counter-wrap">
<div class="counter-number">
&nbsp;
</div>
</div>

CSS

<style>
.counter-wrap {
height:18px;
overflow:hidden;
}
.counter-number {
height:198px;
width:12px;
position:relative;
background-image:url(http://developer.mindtouch.com/@api/deki/files/4548/=counter_ticker_bg.gif);
float:left;
}
</style>

Jquery Code

<script type="text/javascript">
$(".counter-number").each( function(i) {
$(this).attr('id','num'+i);
});
function loadinput() {
var newval = $("#numgo").val();
loadticker(newval);
}
function loadticker(ticnum) {
var fticnum = add_commas(ticnum);
var numheight=18;
addticker(fticnum);
if (ticnum && ticnum != 0) {

var s = String(fticnum);

for (i=s.length;i>=0; i–)
{
var onum=s.charAt(i);
$(“#num”+i).attr(‘value’,onum);
}

$(“.counter-number”).each( function() {
var nval=$(this).attr(“value”);
if (!isNaN(nval)) {
var nheight = Number(nval)*numheight*-1;
$(this).animate({ top: nheight+’px’}, 1500 );
}
if (nval==’,'){
$(this).animate({ top: ‘-180px’}, 1500 );
}
});
}
}
function addticker(newnum) {
var digitcnt = $(“.counter-number”).size();
var nnum = String(newnum).length;
var digitdiff = Number(nnum – Number(digitcnt));
if (digitdiff <0) {
var ltdig = (Number(nnum)-1);
$(“.counter-number:gt(” + ltdig + “)”).remove();
}

for(i=1;i<=digitdiff;i++) {
$(“.counter-wrap”).append(‘<div class=”counter-number” id=”num’ + (Number(digitcnt+i-1)) + ‘”>&nbsp;</div>’);
}
}
function add_commas(nStr) {
nStr += ”;
x = nStr.split(‘.’);
x1 = x[0];
x2 = x.length > 1 ? ‘.’ + x[1] : ”;
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, ‘$1′ + ‘,’ + ‘$2′);
}
return x1 + x2;
}
</script>

Call the function

<a href="#" onclick="loadticker(786554)">load ticker - 786554</a>
<a href="#" onclick="loadticker(1767697234789837)">load ticker - 1767697234789837</a>
<a href="#" onclick="loadticker(1988989)">load ticker - 1988989</a>

I hope you enjoy this code, feel free to post any improvements as this was simply a prototype.

Thanks

Damien
@DamienH