PDA

View Full Version : Javascript Cookie help needed

philcafedelmar
03-29-2010, 09:35 PM
Hi All. I am new to codingforums so if I have posted incorrectly I am sorry.

Anyway, I have created a world clock website using Javascript.

On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00)

I need to add a cookie to this page that remembers the users prefered world city. So when the user returns to the site. The time for that city will be displayed.

Either a cookie is set on each world city button or via a menu where the user selects their prefered world city from a list.

I have tried for 3 days to do the above and I am now well and truly lost. I have confused myself so much and any help would be greatly appreciated.

I can email my full code is that helps. Thank you in advance.
vwphillips
03-30-2010, 10:38 AM
you should have posted in the main javascript forum

but

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script>

var GMToffset = 0,t;

function start() {
GMToffset=zxcReadCookie('time')||0;
t=setInterval('digitalclock()',500);
}

function digitalclock()
{
var today=new Date();
var hours=(today.getHours() + GMToffset*1+24)%24;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}

function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}

function updatetime(nu) {
GMToffset = nu;
zxcCreateCookie('time',nu,1); // change 1 to the number of days persistance required
}

function zxcCreateCookie(nme,v,days){
document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function zxcReadCookie(nme){
nme+='=';
var split = document.cookie.split(';');
for(var z0=0;z0<split.length;z0++){
var s=split[z0];
while (s.charAt(0)==' ') s=s.substring(1,s.length);
if (s.indexOf(nme)==0) return s.substring(nme.length,s.length);
}
return null;
}

</script>

</head>
<body onload="start()">

<div align="center">
<input type="button" onclick="updatetime(-3)" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(-4)" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(-7)" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime(-10)" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(-11)" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(-13)" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>

<div id="txt"></div>

</div>

<div align="center">
<input type="button" onclick="updatetime(9)" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(8)" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(7)" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime(1)" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(0)" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime(3)" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
</body>

</html>
philcafedelmar
03-30-2010, 12:12 PM
Just wanted to say thankyou very much for your help. It works perfect and all makes sense now I can see how.
Sorry for my mistake listing in the wrong place. Thanks again. Phil.
Philip M
03-30-2010, 04:31 PM
Vic -

As with all scripts of this kind, the times shown are wrong if Daylight Saving Time is in operation in the user's time zone (as now applies in the UK).

For example, at 1626 BST your clock shows the time in Tokio as 0126 and Sydney as 0326, when in fact the actual times are 0026 and 0226.
philcafedelmar
03-30-2010, 06:07 PM
Sorry to bother you again. I have just amended all of the times to display correctly.

I have been trying to add text below either the clock or the individual buttons. The text would change onclick of a world city button and say something like "The time in New York is now displayed". This would also be displayed when the user returns to the world clock page.

It just that at the moment. When the users prefered time is displayed (Cookie). There is nothing to actually let them know which world time is curently displayed!

As you have probably gathered, Javascript is not my favourite area. ActionScript I am fine with but the site needs to be Javascript only!

I hope you can understand that. The more I am trying to do this site the more I am confusing even myself!

You have already helped me a great deal so if you do not have time to help with this I understand. Thanks.