jquery countdown/countUP 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 site loads i make ajax request and get the above response times, these are events that happens daily for everyday, but different timing. i want to get that time and put a count down on how many minitues left or hours or seconds and show that and once the seconds are done, then show how many minitues ago that event took place, after 15 minitues later show new even count down. so following on how it will look on 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)

this is kind of very simple for pro in javascript and really complicated for me, so need your guys help, if the script im using not good and you prefer some other script for this kind of task, please share with me, it dont have to be jquery script, but helps if its 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).