Question

OK, so I am using a jQuery plugin called CountUp: http://blog.ogulcanorhan.com/weekend-project-jquery-countup-plugin/

The script is fairly simple:

<script type="text/javascript">
    $(document).ready(function(){
            $('#jq_count_up').countUp({'lang':'en', 'format':'full', 'sinceDate': 'dd/mm/YYYY-hh:mm:ss'});
    });

So the jQuery takes a starting timestamp (dd/mm/YYYY-hh:mm:ss) and then returns the days, hours, minutes, seconds since the input timestamp above. The result will be displayed in side a tag, as shown below:

Simple enough and it works great if you are only using the code one time on the page. I have multiple timestamps which I am wanting to apply this script to. The application is an email queue of how long people have been waiting. So to try to fix this, I dynamically generated the timestamp via PHP on the server side and I also changed the name of the div so that it was unique for each of the multiple timestamps. For example, here is the output of my PHP:

………………..

    </td><td>
<script type="text/javascript">
    $(document).ready(function(){
        $('#jq_count_up-4').countUp({'lang':'en', 'format':'full', 'sinceDate': '04/12/2011-14:56:33'});
    });
</script>
<div id="jq_count_up-4"></div>
</td><td>

(then later on in the same HTML output:

</td><td>
<script type="text/javascript">
    $(document).ready(function(){
        $('#jq_count_up-2').countUp({'lang':'en', 'format':'full', 'sinceDate': '04/12/2011-08:44:43'});
    });
</script>
<div id="jq_count_up-2"></div>
</td><td>

So notice that I did 2 things to try to fix this issue:

• I changed the name of the reference to the div name tag within the script (I think) from '#jq_count_up-2' to '#jq_count_up-X' where X is a unique number.
• I changed the name of the <div id=> tag so that it is unique as well, and is the same name as in #1 above.

So the result is that still only one of the timestamps works, and it is the last one on the page….. Any help would be appreciated!

Answer 1

It doesn’t look like the plugin is designed to be used more than once on a page. jQuery plugins need to be designed with that specifically in mind (here’s a brief introduction on how to achieve multiple instances). From the plugin code it appears that global variables are being set, so a second instance of the plugin will overwrite the counter in the first, etc.

You could either tweak the plugin to support multiple instances and send it back to the author (he’ll love you) or find another one.

Hope that helps.