...

View Full Version : 2 clocks on one line of my webpage



effpeetee
02-05-2007, 11:41 AM
I have a website with a oneline Date/Time clock. I want to add a second clock on the same line using Javascript. I have been unable to do this.

This is the code:-

<!--
tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyeara = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();

if(nyeara<1000){nyeara=(""+(nyeara+11900)).substring(1,5);}
else{nyeara=(""+(nyeara+10000)).substring(1,5);}



if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyeara+"------"+nhour+":"+nmin+":"+nsec+"";
setTimeout("GetClock()", 1000);
}
window.onload=function(){GetClock();}
//-->

which is called from the index page.
I want to run it twice. Once in English and once in french.
Both together at each end of the first line.

Any help gratefully received.

effpeetee

vwphillips
02-05-2007, 01:14 PM
dont know how far back or ahead they are or about daylight saving but



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
<!--
var tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December");

function Translate(txt){
var french= ['Dimanche','lundi' ,'mardi' ,'mercredi' ,'jeudi' ,'vendredi','samedi','janvier','février','mars','avril','mai','juin','juillet','août','septembre','o ctobre','jujube de Novem','décembre'];
var english=tmonth.concat(tday);
for (var zxc0=0;zxc0<english.length;zxc0++){
txt=txt.replace(english[zxc0],french[zxc0]);
}
return txt;
}


function GetClock(){
var d = new Date();
var nday = d.getDay();
var nmonth = d.getMonth();
var ndate = d.getDate();
var nyeara = d.getYear();
var nhour = d.getHours();
var nmin = d.getMinutes();
var nsec = d.getSeconds();

if(nyeara<1000){nyeara=(""+(nyeara+11900)).substring(1,5);}
else{nyeara=(""+(nyeara+10000)).substring(1,5);}



if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyeara+"------"+nhour+":"+nmin+":"+nsec+"";
document.getElementById('frenchclockbox').innerHTML=Translate(document.getElementById('clockbox').in nerHTML);
setTimeout("GetClock()", 1000);
}
window.onload=function(){GetClock();}

//-->
</script>
</head>

<body>
<span id="clockbox" ></span><span id="frenchclockbox" ></span>
</body>

</html>

effpeetee
02-05-2007, 03:32 PM
Many thanks for the code. It is nearly what I need.
I have altered the last line to:-

<body>
<div align="left"><span id="clockbox" ></span><div align="right"><span id="frenchclockbox" ></span>
</body>

this shows what I want except I do not want the line feed between the two displays. Can it be done?

Check my site to see where it needs to go.

http://www.exitfegs.co.uk

Once again, many thanks for your help.

effpeetee

vwphillips
02-05-2007, 06:15 PM
A DIV will produce the same effect as a <BR>

I would use absolute positioning within a relative DIV

may be back, what sort of spacing do you require, its a CSS issue really.

ps you could cheat and use a blank image or hidden text box between the displays

tonyp12
02-05-2007, 06:35 PM
this shows what I want except I do not want the line feed between the two displays. Can it be done?


Linefeed?, do you mean the dashes as in '----' ?
use: &nbsp (non breakable space)

effpeetee
02-05-2007, 08:23 PM
Hello everyone.

If you look at the URL below, you will see what I am needing. I am learning French and I thought it would be good to have the two clocks. One for each tongue.

effpeetee

http://www.exitfegs.co.uk/3clox.html

vwphillips
02-05-2007, 10:03 PM
As I say its a CSS issue but willl try and look tomorrow

tonyp12
02-05-2007, 11:40 PM
How about this Version


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style>
#clockbox1{
position: absolute;
right: 1em;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--
var tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tday.push("Dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
var tmonth =new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December");
tmonth.push("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","jujube de Novem","décembre");

function GetClock(){
var d = new Date();
var nday = d.getDay();
var nmonth = d.getMonth();
var ndate = d.getDate();
var nyeara = d.getYear();
var nhour = d.getHours();
var nmin = d.getMinutes()
var nsec = d.getSeconds()

if(nyeara<1000){nyeara=(""+(nyeara+11900)).substring(1,5);}
else{nyeara=(""+(nyeara+10000)).substring(1,5);}

if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

for (var i=0; i<2; i++){
document.getElementById('clockbox'+i).innerHTML= tday[nday+i*7] + ", " + tmonth[nmonth+i*12] + " " + ndate + ", " + nyeara + " &nbsp;&nbsp; " + nhour + ":" + nmin + ":" + nsec;
}

setTimeout("GetClock()", 1000);
}
window.onload=function(){GetClock();}

//-->
</script>
</head>

<body>
<span id="clockbox0" ></span><span id="clockbox1"></span>
</body>
</html>

effpeetee
02-06-2007, 09:45 AM
OK, I have managed to solve this one myself.

My thanks to all who have helped me. The fellowship is sweet.

Check it out.

http://www.exitfegs.co.uk/

effpeetee

===========================================================


Yes Tonyp12,

This is exactly what I need, but I do need the text in white. Not sure how to do this. <span class="t12w"> does not work.
I am new to javascript, so any help welcomed.

Thanks amillion.

effpeetee

effpeetee
02-06-2007, 01:08 PM
The code works faultlessly. I have been looking at the code but I cannot understand how it gets the two clocks. I know that only the names need to be changed,, but I can't see how it's done.

I have two massive tomes on Javascript but to no avail.

Any quick pointers would be greatly appreciated.

effpeetee

tonyp12
02-06-2007, 07:15 PM
As you are using my version.

Take weekday, i create is array that is 14 long.
0-6 is in english and 7-13 is in french
(array.push is just used so you can do it in two text lines for easy editing.)

And a simple loop that runs twice

first time it's:
document.getElementById('clockbox'+'0').innerHTML= tday[nday+0*7

second time:
document.getElementById('clockbox'+'1').innerHTML= tday[nday+1*7

As you see it's important the clockbox are named clockbox0, clockbox1 and so on,
there is no limit you could have 10 different languages.

without using loops (you have individual controll, like boxname and date format etc.)
document.getElementById('clockbox').innerHTML= tday[nday]
document.getElementById('clockboxFrench').innerHTML= tday[nday+7]


And the color is controlled like this

<style>

#clockbox0{
color:white
}


#clockbox1{
position: absolute;
right: 1em;
color:white
}

</style>

Arty Effem
02-06-2007, 07:35 PM
OK, I have managed to solve this one myself.
Very nearly. You need to add a ; after &nbsp or it's not valid.
This is what shows under Moz and Opera:

Tuesday, February 6, 2007 &nbsp18:33:16

Defense de composer sur I.E. (or whatever that should be)

effpeetee
02-07-2007, 10:02 AM
[QUOTE=Arty Effem;531299]Very nearly. You need to add a ; after &nbsp or it's not valid.
This is what shows under Moz and Opera:

Tuesday, February 6, 2007 &nbsp18:33:16===== I don't understand this

My knowledge of Javascript is quite elementary.
Just beginning.

effpeetee

PS I have tried Opera and see what you mean. However, nothing that I can do alters it at all.
I can find nothing in my books to help either. Even Google has been of no use in this instance.

How does one insert a space in Js.

HELP!

effpeetee

effpeetee
02-07-2007, 10:03 AM
As you are using my version.

Take weekday, i create is array that is 14 long.
0-6 is in english and 7-13 is in french
(array.push is just used so you can do it in two text lines for easy editing.)

And a simple loop that runs twice

first time it's:
document.getElementById('clockbox'+'0').innerHTML= tday[nday+0*7

second time:
document.getElementById('clockbox'+'1').innerHTML= tday[nday+1*7

As you see it's important the clockbox are named clockbox0, clockbox1 and so on,
there is no limit you could have 10 different languages.

without using loops (you have individual controll, like boxname and date format etc.)
document.getElementById('clockbox').innerHTML= tday[nday]
document.getElementById('clockboxFrench').innerHTML= tday[nday+7]


And the color is controlled like this

<style>

#clockbox0{
color:white
}


#clockbox1{
position: absolute;
right: 1em;
color:white
}

</style>
Thanks Tonyp12,

Very useful explanation. Much better than the books that I bought.

effpeetee

tonyp12
02-07-2007, 03:32 PM
Tuesday, February 6, 2007 &nbsp18:33:16===== I don't understand this


Did you try to change the nonbreakable space to this:

&nbsp;&nbsp;

And you can get 4 spaces by starting and ending with a regular space.
" &nbsp;&nbsp; "

What I understand, you have to end each one with a ';'
(but not in IE)

effpeetee
02-07-2007, 05:33 PM
Yes. I feel quite a fool.
I did all the changes, but I failed to "Refresh" each time.

I kept getting the version from the cache.

It really is OK now. Checked with IE7, Firefox, and Opera.

Thank you all for your invaluable help.

Check it out.

http://www.exitfegs.co.uk

effpeetee

effpeetee
02-09-2007, 09:59 AM
Thank you Tonyp12.

I did get it working. I had mis-understood the posts.The other problem that I still have is:

How do I control the text size,style,colour in Javascript.

Not just in your program, but in any JS,

Document write in the text of my choice.

effpeetee

effpeetee
02-09-2007, 03:27 PM
Thanks Tonyp12,

I have now sorted this out. I mis-understood the advice given.
My 82 year old brain is not in the Formula 1 league.

Thanks to you all for your kindness and expertise.

effpeetee



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum