Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    2 clocks on one line of my webpage

    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","Novem ber","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
    Last edited by effpeetee; 02-05-2007 at 01:00 PM.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    dont know how far back or ahead they are or about daylight saving but

    Code:
    <!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','octobre','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').innerHTML);
     setTimeout("GetClock()", 1000);
    }
    window.onload=function(){GetClock();}
    
    //-->
    </script>
    </head>
    
    <body>
    <span id="clockbox" ></span><span id="frenchclockbox" ></span>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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)

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    As I say its a CSS issue but willl try and look tomorrow
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about this Version

    Code:
    <!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>
    Last edited by tonyp12; 02-07-2007 at 04:24 PM.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 02-06-2007 at 10:04 AM.

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

  • #11
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by tonyp12; 02-06-2007 at 08:36 PM.

  • #12
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by effpeetee View Post
    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)

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    [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
    Last edited by effpeetee; 02-07-2007 at 12:24 PM.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by tonyp12 View Post
    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

  • #15
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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)
    Last edited by tonyp12; 02-07-2007 at 04:20 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •