jQuery countdown/count up with server-side values

Question

Script: http://keith-wood.name/countdown.htm

Daily json response:

items: { fajr: '5:23 am', sharooq: '7:23 am', dhur: '1:34 pm', asr: '4:66 pm': magrib: '6:23 pm', isha: '8:01 pm'}

When the site loads, I make an Ajax request and get the above response times. These are events that happen daily, with different timings. I want to get that time and put a count down on how many minutes are left or hours or seconds, and show that and once the seconds are done, then show how many minutes ago that event took place. After 15 minutes, show a new event count down. This is how it will look on the display:

dhur 2 hours left
dhur 2 minutes left (if no longer hours left)
dhur 55 seconds left (if no longer minutes left)
dhur 5 seconds ago (if count down finished and then show how many seconds ago)
dhur 9 minutes ago (if extended more then seconds, then show how many minutes ago)
asr 1 hour left (after 15 minutes later time changes to new event)

If the script I'm using is not good and you prefer some other script for this kind of task, please share with me. It doesn't have to be a jQuery script, but it helps if it's jQuery.

Answer 1

I guess you would be better off not reimplementing this thing.

There is already a really nice jQuery plugin for this functionality (with i18n support too)

jQuery timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago" or "2 years from now")

P.S.: don't forget to set jQuery.timeago.settings.allowFuture = true; to allow dates in the future

---

If you need some sort of "callback" you could do two things.

1. Assuming you only supported english (no i18n) simply use setInterval which every 20-25 seconds checks if the string set by jQuery timeago is "15 minutes ago" and then do whatever
2. Hack Adapt the code of the plugin and hook yourself into the e.g. $timeago.inWords method and do whatever if the distanceMillis parameter is >=900000 (15*60*1000).