myClocks Admin

The myClocks function provides live clocks of different time zones to be output to the Home Page.  For each clock, a time zone is chosen and a text label can be added for a country or city.  Site visitors need to have JavaScript enabled in their browsers to see this function.  

Configuring myClocks
 

1. As a logged-in admin user, click the Home Page Admin link from the Home Page, and choose the myClocks Admin option.  (Note: if the name of myClocks has been changed in the function admin settings, the Admin menu will display the modified name.)

2. Output this function to users' browsers can be turned on and off.

3. The "Can user edit" option can be set to give or deny an ordinary user from changing the default clocks to their individual preferences for their view of the Home Page.  

4. The "Edit number" option allows the maximum number of clocks that can be defined by an ordinary user.  This should be set a value which does not allow the user to exceed the space available (as determined by style sheet settings).

5. The "Name" of the function (default being myClocks) can be changed.  The name entered here will be used on the Admin menu and on the standard user's Preferences to refer to the myClocks function.

6. A column of icons down the right-hand side of the page allow you to add, delete, edit or re-order clocks.  (Bear in mind that the effect of your changes may vary according to your stylesheet settings.)

• Adding a clock: Click the icon to create a clock.  A pop-up window will ask you to enter the time zone for your desired clock, and a description which will be displayed on the Home Page.

• Deleting a clock: Click the clock name in your list which you want to delete, and then click the icon.  You will be asked to confirm the deletion by clicking OK.

• Editing a clock: Click the link in your list which you want to edit, and then click the icon.  A pop-up window will display the current time zone and descriptive name.  Click OK to confirm when you have finished editing.

• Re-ordering clocks: Click on a clock in your list which you want to reorder, and click the or icon to move it up or down your list.

7. myClocks can be previewed before committing any changes you have made.  

8. To confirm any changes you have made, click Update.  (Clicking the Home Page or Home Page Admin links will also confirm your changes.)  To cancel any changes you have made since the last update, click the Cancel Changes link.

Technical Details

These technical details are intended for web designers when setting up a stylesheet.

The sample HTML output below shows how myClocks are output.  If customised output is required for your home page implementation, please contact the developers.

• In the output Home Page, the myClocks function is contained between the comments <!--Clocks part--> and <!--Clocks Part end-->, containing a main DIV block with class and id="clock",  and a nested DIV block for each clock with a sequentially numbered id.

• Do not be disconcerted by the id=clockx DIV blocks appear empty: they are populated by the JavaScript below.

HTML Output
 

<!--Clocks part-->

<div class="clock" id="clock">

    <div id=clock1></div>

    <div id=clock2></div>

  <script language=javascript>

    function showTime () {

    if (!document.all&&!document.getElementById)return;

    <!-- Clock "1"-->

    thelement=document.getElementById? document.getElementById("clock1"): document.all.clockuk;

    var Digital=new Date();

    Digital.setTime( (Digital.getTime()+Digital.getTimezoneOffset() * 60 * 1000) + (0 * 60 * 60 * 1000) );

    var hours=Digital.getHours();

    var minutes=Digital.getMinutes();

    var seconds=Digital.getSeconds();

    var hours=Digital.getHours();

    var minutes=Digital.getMinutes();

    var seconds=Digital.getSeconds();

    if (hours<10) hours = "0" + hours;

    if (minutes<=9) minutes="0" + minutes;

    if (seconds<=9) seconds="0" + seconds;

    var ctime=hours+":"+minutes+":"+seconds;

    thelement.innerHTML="<span class='clocktext' id='clocktext_1'><b>GMT</b>: "+ctime+"</span>";

    <!-- Clock "2"-->

    thelement=document.getElementById? document.getElementById("clock2"): document.all.clockuk;

    var Digital=new Date();

    Digital.setTime( (Digital.getTime()+Digital.getTimezoneOffset() * 60 * 1000) + (2 * 60 * 60 * 1000) );

    var hours=Digital.getHours();

    var minutes=Digital.getMinutes();

    var seconds=Digital.getSeconds();

    var hours=Digital.getHours();

    var minutes=Digital.getMinutes();

    var seconds=Digital.getSeconds();

    if (hours<10) hours = "0" + hours;

    if (minutes<=9) minutes="0" + minutes;

    if (seconds<=9) seconds="0" + seconds;

    var ctime=hours+":"+minutes+":"+seconds;

    thelement.innerHTML="<span class='clocktext' id='clocktext_2'>Brussels: "+ctime+"</span>";

    setTimeout("showTime()",1000);

    }

    </script>

  <script language="JavaScript">showTime();</script>

</div>

<!--Clocks Part end-->

Sample Stylesheet Implementation

The stylesheet is individual to each implementation.  The code below is just an illustration of how it may be implemented.

.clock {

    border: none;

    font-family: "Times New Roman", Times, serif;

    font-size: 16px;

    font-weight: normal;

    font-style: normal;

    color: #000;

    }

#clock {

    z-index: 1;

    position: absolute;

    top: 10px;

    padding: 0px 0px;

    text-align: left;

    font-weight: bold;

    font-style: italic;

    color: #000;

    }

#clock1 {

    right: 10px;

    }

#clock2 {

    left: 10px;

    }