Jquery Number Ticker

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 – Jquery Number Ticker - by Damien Howley.

counter_ticker_bg

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

About these ads

16 responses to “Jquery Number Ticker

  1. Thanks for this nice code, however I did have a problem with IE where overflow:hidden; did not work untill I added position:relative; to .counter-wrap.

  2. Not sure what is wrong but when I set this up locally nothing happens when I click a link. I have tried on both jquery 1.2 and 1.4.

    • Found the cause to be special quote characters when I copied and pasted from the website.

      Now though, the first digit is always zero.
      086544
      0767697234789837
      01988989

  3. I’m trying to get this to work with

    Can’t get it to work for the life of me. Any tips? Just will show up with a 0 image.

    I also tested with links, and added the CSS notation in the other comment, however no combination would work for me.

  4. Hello, great code!

    Is there any way that you can show me how I would call two tickers on the same page?

    Thanks!

  5. To fix the issue with the beginning zero.. yes I scratched my head over that for a bit.. you have to put an id into the first div.

     

  6. Hey Matt, Where are you using the number ticker? It has been a while since I have used this code and I would love to see it in action.

    I am currently using the counter at my company community. I have connected it to the MindTouch API and it checks for visits every 10 seconds. Basically it auto updates when other users visit the page.

    http://developer.mindtouch.com/en/docs/MindTouch/Skinning

  7. Hi,
    there is a problem in IE7, even the demo, it does not work in IE7, can you please suggest an easy fix. It works great on IE8, FF

    Thanks

  8. Hi there,

    Loved the demo. So I copied the code and implemented into my own project. However it does not work. The counter stays at ’0′ no matter what I try.

    Reading the comments more people seem to have issues not getting it to work. Could you please be so kind as to try to copy past it yourselve and let us know what the fix should be?

    I can’t get it to work…. ;-((

  9. Hey, I think I am going to have to re-write this code. I originally wrote it about 2 years ago and I think it has obsoleted itself, or at least my code has. I know everyone is having problems with it and I do apologize.

    If I do re-write it I can assure you it will be much more reliable this time around.

    Damien

  10. hi Damien,
    i like your code, and i have downloaded your source code, but i can’t get it work on my localhost, any update on re-writing the code ?

    thank you
    santi

  11. I used the following to get multiple counters on a single page. I also set up a looping function that updates the counter every second.

    Note that I added an elmt variable to loadticker (and addticker), and changed the num01 etc. from IDs to classes.


    // These aren't needed, they just set up the date, which is what my counter was based off
    var today=new Date();
    var yearStart =new Date(today.getFullYear(), 0, 1); //Month is 0-11 in JavaScript

    // for each ticker you need...
    var counter1 = Math.ceil((today.getTime()-yearStart.getTime())/1000); // or whatever the initial count is (this calculates seconds since the year began)

    // You only need the following 6 lines if you want the counter to update each second
    updateCounter1();
    function updateCounter1() {
    counter1++;
    loadticker(counter1, '#element');
    t=setTimeout(updateCounter1,1000);
    } // End of code for update by the second

    $("#element .counter-number").each( function(i) {
    $(this).addClass('num'+i);
    });
    loadticker(counter1, '#element');
    // ...end each ticker specific code.

    function loadticker(ticnum, elmt) {
    var fticnum = add_commas(ticnum);
    var numheight=18;
    addticker(fticnum, elmt);
    if (ticnum && ticnum != 0) {

    var s = String(fticnum);

    for (i=s.length;i>=0; i--)
    {
    var onum=s.charAt(i);
    $(elmt+" .num"+i).attr('value',onum);
    }

    $(elmt+" .counter-number").each( function() {
    var nval=$(this).attr("value");
    if (!isNaN(nval)) {
    var nheight = Number(nval)*numheight*-1;
    $(this).animate({ top: nheight+'px'}, 300 );
    }
    if (nval==','){
    $(this).animate({ top: '-180px'}, 300 );
    }
    });
    }
    }

    function addticker(newnum, elmt) {
    var digitcnt = $(elmt+" .counter-number").size();
    var nnum = String(newnum).length;
    var digitdiff = Number(nnum - Number(digitcnt));
    if (digitdiff <0) {
    var ltdig = (Number(nnum)-1);
    $(elmt+" .counter-number:gt(" + ltdig + ")").remove();
    }

    for(i=1;i<=digitdiff;i++) {
    $(elmt).append(' ');
    }
    }

    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;
    }

    Btw, the loadinput function you give above isn’t needed (or used) by the ticker. It can be safely removed.

  12. Hi,

    Thanks a lot for sharing this code, however, is there any way to implement this code with a `start` and `stop` buttons and make loop forever till the user hits the `stop` button?

  13. Hi,

    I want to get a ticker to count how many people have bought from my site, currently we have had 22,000 customers (7,000 unique). Is there some way to get a counter to show new visitors?

    Thanks,

    David

    http://www.linksimply.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s