javascript countdown synchronize on different browsers

Question

I'm sorry if this question is a bit tricky but I have no other way of asking it and I am an absolute noob in javascript world.

I have this javascript counter that someone helped me to gather on stackoverflow and it works fine BUT the countdown timer will start from the beginning on a different browsers.

i.e. when I look at it on Firefox, it will carry on counting down and it will keep working as it should. lets say the timer is set to countdown a day. on Firefox it will show 23:24 hours/minutes left but if I open a new browser (any browser), it will show the timer 23:59 hours/minutes left and it will start counting down from there... even though the countdown timer was already running on the same page!!

here is the code:

 <script type="text/javascript">
var EXPIRY = parseInt(new Date().getTime()/1000) + 24*60*60;
var counter = null;
var counter_interval = null;

function setCookie(name,value,days) {
    console.log("setting "+name+" "+value);
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires="+date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";    
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1,c.length);
        }
        if (c.indexOf(nameEQ) === 0) {
            return c.substring(nameEQ.length,c.length);
        }
    }
    return null;
}

function deleteCookie(name) {
    setCookie(name,"",-1);
}

function resetCounter() {
    EXPIRY = parseInt(new Date().getTime()/1000) + 24*60*60;
}

function stopCounter() {
    window.clearInterval(counter_interval);
    deleteCookie('Expiry');
}

function updateCounter() {
    var msg = '';
    curTime = parseInt(new Date().getTime()/1000);
    if (curTime < EXPIRY) {
        msg = convertSecondsToDays(EXPIRY - curTime);
    }
    else {
        EXPIRY = parseInt(new Date().getTime()/1000) + 24*60*60;
    }
    var el = document.getElementById('counter');
    if (el) {
        el.innerHTML = msg
    }
}

function convertSecondsToDays(sec) {
  var days, hours,rem,mins,secs;
  days =  parseInt(sec/(24*3600));
  rem = sec - days*3600
  hours = parseInt(rem/3600);
  rem = rem - hours*3600;
  mins = parseInt(rem/60);
  secs = rem - mins*60;
  return days +":" + hours +":"+mins + ":"+ secs + "";
}

function startCounter() {
    stopCounter();
    setCookie('Expiry', EXPIRY, 1);
    counter_interval = window.setInterval(updateCounter, 1000);
}

function init() {
    EXPIRY = getCookie('Expiry');
    if (!EXPIRY) {
        console.log("unable to find cookie");
        resetCounter();
    }
    startCounter();
}

init();
</script>

you can view it on the fiddle here: http://jsfiddle.net/h2DEr/1/

how can i make it in a way that it will show the same time left on all the browsers as it will be displayed on the same page?

Thanks

Edit:

I found this code which works with mysql. it works fine but instead of counting down it will show how many days/hours/minutes the product/item was posted on the site. and this doesn't need any javascript as is...

This is sort of what I am looking for but instead of counting up it needs to countdown:

    <?php



//list fields and convert to seconds

$countdown['days']=(5) * 24 * 60 * 60;

$countdown['hours']=(3) * 60 * 60;

// etc, etc

$countsum=time() + $countdown['days'] + $countdown['hours']; //and so on

// the above would be the timestamp to enter into the table



##########



// 'dumbed down' query
include "config/connect_to_mysql.php";

$result=mysql_query("SELECT * FROM tomProduct WHERE id='id';");



while ($row=mysql_fetch_assoc($result))

    $time=$row['date_added'] - time(); //this field would be a PHP timestamp (time())



$count=getdate($time);



$x=getdate(); //todays information



$count['mday'] -= $x['mday'];

$count['hour'] -= $x['mday'];

$count['minutes'] -= $x['minutes'];



echo "$count[mday] Days $count[hour] Hours $count[minutes] Minutes"; //etc



// untested, but should work

?>

Answer 1

JavaScript is always running on the client. One instance of the timer has no knowledge of any other instance running elsewhere.

To synchronize time between different browsers, you would need server-side scripts. Using expiration-time-stamps in a server-side script in conjunction with JavaScript timers should give you the synchronization you are looking for.

Answer 2

Cookies are not transferred from browser to browser. They are stored in the web browser.