I’m about to finish my redesign of sumaisma website for ramadan theme, got stuck with some gadget where i should put a count down till the time of the next prayer..

I’m used to play and tweak around with php’s time() format, manipulate it just like i need.. i even created “jPrayer” which is a jQuery plugin to display custom alerts on prayer times ( soon out to the market, lol )

But that’s not the same with javascript, haven’t yet played with it’s Date() methods and functions.. so when i got stuck with JS in that issue, i’m was so bored to configure the whole procedure, going back and forth from php’s function to js’ functions .. cuz the original prayer timings is brought from my php’s xml parser ..

Anyway, i googled the issue, and found a great way to manipulate JS’s Date() object just like i do in PHP.. using the great setTime() and getTime() ..

And i got my code much shorter ( 6 lines of code instead of  17 high load calculations ).

Here is how i did it :

// next event time , gotten from php's time() function
// multiplied by 1000 because php's time() uses seconds, where js's setTime and getTime uses milliseconds
prLeft=1251016680*1000;

// initiate a date object 'event'
 event= new Date();
// use setTime to put my next event's UTC-formatted timestamp in 'event' object
 event.setTime(prLeft);

// initiate another date object 'now' to hold our current time
 now= new Date();

// remove the timezone effect
// because this script was meant to have persistent timezone of my client's country
 now.setTime(now.getTime() + (now.getTimezoneOffset()*60000) );
// then set timezone setting of qatar +3, by adding 3 hours * 60 min * 60 sec * 1000 milliseconds = 10800000
 now.setTime(now.getTime() + (10800000) );

// now we have our two variables ready for manipulation
// same timezone, same format .. time to process some dates lol

// use getTime to calculate difference between the two dates in milliseconds
 diff= event.getTime() - now.getTime();
// to save myself a 4 or more lines of math calculations to extract hours and minutes and such
// i initialized a Date() object to store the info then extracted the information i want very easily
 diffTime = new Date(diff);

// Voila!
 prLeft['hours']=diffTime.getHours();
 prLeft['minutes']=diffTime.getMinutes();
 prLeft['seconds']=diffTime.getSeconds();

I think there might be better trick for the timezone manipulation .. but it’s not hard like that anyway..

Then i easily made timer to tick every second till it gets to the event’s time .. and it’s working beautifully ATM ..

BTW: Firebug was a great help finishing this script, world is just so dark without it in my foxy installation. LOL