Oğulcan

Weekend Project: jQuery CountUp Plugin

This is my first jQuery plugin and also second weekend projectCountUp plugin is simply calculates time different between two dates and also iterates second by second.

One of the dates should be from past and second date will be setted automatically present. Then plugin gonna find how many time passed until now in three different format. These formats are full date (by year, month, day etc.), just days&more and lastly only seconds.

Version History
v1.1: Supports multiple instance (special thanks Gabriel Murphy)
v1.0: Just launched plugin.

Note: Lastest version is on github.

Example:

$(document).ready(function(){

$('#jq_count').countUp({'format':'full', 'sinceDate': '01/01/2011-00:00:00'});

});

This snippet gives us 0 year, 9 month, 18 day, 20 hour, 51 minute, 32 seconds (which also shows the time that i wrote this post). You can change the output format by editing ‘format’ field.

Plugin is already available with 4 languages: English, Turkish, Spanish and Deutsch. Another example for Spanish:


$(document).ready(function(){

$('#jq_count').countUp({'lang': 'es' ,'format':'full', 'sinceDate': '01/01/2011-00:00:00'});

});

Last but not least, you may want to hide “0″ outputs, “write_zero” field does it.

Some other notes:

  • Date format: ‘dd/mm/yy-hh:mm:ss’
  • Only call with ID not class.
  • Suitable for jQuery 1.4+ and also jquery.min

Here is a small demo and codes are on github.

Please do not hesitate for bugs and suggestions.



Yazar: Oğulcan Orhan

Tarih: 19 Ekim 2011

Bu yazıya yapılan 11 yorum

  1. [...] hafta, haftasonu projesi olarak geliştirdiğim jquery eklentisini (jquery.countup) de kullanarak, ilk ve minik bir twitter api uygulaması [...]

  2. Awesome jQuery script! Would be great if it would support multiple calls (need to get rid of global variables). I am using it in an app that needs to take multiple timestamps and “CountUp”…

    Could you support this?

  3. Gabriel;

    Thanks for your comment. I’ll rewrite the plugin asap and it’s gonna support multiple instance.

  4. Thanks much! BTW I posted this issue on stackoverflow:

    http://stackoverflow.com/questions/8379723/jquery-calling-same-function-multiple-times-with-different-input-to-the-same-div

    Your jQuery script is great! Will be awesome with multiple instance support.

  5. Gabriel;

    It’s ready for multiple instance. Enjoy it! :) And thanks for your appreciation.

  6. Awesome! Keep up the great work!

  7. [...] kaç tweet gönderdiklerini hesaplıyor. Bunu hesaplarken önceki aylarda yazmış olduğun jQuery countUp eklentisinin temellerini kullanıyor. Temelden kastım, bulduğu gün sayısını yalnızca [...]

  8. [...] Until parameter should be from future otherwise plugin throws an error. Another date parameter will be setted now automatically. Date formats are is the same as CountUp plugin. [...]

  9. This plugin has been very helpful. Is there anyway to stop it from counting? Something like… $(“#counter”).countUp(“stop”); ??? Thanks in advance.

  10. [...] – Uygulama daha önce geliştirdiğim ve paylaştığım CountUp tabanlı. – Projeyi basit kılmak adına MySQL sınıfını ve [...]

  11. Merhaba arayıp da bulamadığım pratik bir şey. Eline sağlık.

    Yusuf

    8 Kas 2013

Yazıyla ilgili ne düşünüyorsun?