Live clock in header

[Joker™]

I was trying to make this from a long long time , and with the help of a friend and a book at last achieved it.

Live clock is a dynamic clock and not a static clock as we have in header of default SMF 2.0 RC3. I was trying to make the clock in such a way that it should be using as minimum resources as possible .
As it's not my alone work so not making a package of it (might someone may move it to appropriate board if it is in wrong place).

So to make it just make these following edits (make backup of the file before editing it).

open themes\default\index.template.php
Find:

Code Select Expand

echo '
<li>', $context['current_time'], '</li>
</ul>';

Replace it with:

Code Select Expand

echo '

<li>',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "pm"}
else {am_pm="am"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script>
</li></ul>';

Hope you guys will like this small piece of code .

For live demo can visit freakygurus.com (You need to login to see the clock)

Edit: Now the clock code is compatible with "W3C Markup Validation"

[xenovanis]

Hi Joker™ 

Thanks for sharing. I visited your site but I can't find the clock.  Is it me?

[Joker™]

you need to login to see it . this is the screen shot

[kat]

If you want a clock that can handle different timezones, such as the one I have here, just below the banner:

http://www.tlakoc.org.uk

Gimme a shout.

[Joker™]

If you want a clock that can handle different timezones, such as the one I have here, just below the banner:

http://www.tlakoc.org.uk

Gimme a shout.

surely like to see the code .

But i think the clock code we made gets the user time zone itself , one doesn't have to make time zone settings (i've not tested it completely , someone can give me a feedback).

[kat]

We did it that way, so that members could check what the time was, where other members live.

It was so they could co-ordinate wars, or something.

This was the code, pretty-well:

Code Select Expand

<div style = "text-align: center;">
<form name="where">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local time</option>
<option value="0">London GMT</option>
<option value="+2">Amsterdam</option>
<option value="7">Bangkok</option>
<option value="-3">Buenos Aires</option>
<option value="-5">Chicago</option>
<option value="+2">Dordrecht</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="8">Hong Kong</option>
<option value="-4">New York</option>
<option value="+8">Perth</option>
<option value="2">Rome</option>
<option value="-7">San Francisco</option>
<option value="11">Sydney</option>
<option value="9">Tokyo</option>
</select>

<script language="JavaScript">

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;

if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}


setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>

<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>
</form>
</div>

[Joker™]

Thanks for the code , will surely try to tweak it .

[kat]

That's what code's for, mate.

I was gonna try and make it into a mod, but getting all the settings, in admin, could be a pain in the bum.

[Joker™]

I was gonna try and make it into a mod, but getting all the settings, in admin, could be a pain in the bum.

can you elaborate the idea some more, sounds interesting.

[MaxwellsHouse]

That's what code's for, mate.

I was gonna try and make it into a mod, but getting all the settings, in admin, could be a pain in the bum.

would be a neat mod to have for us "novices" 

[!RFAN]

Code Select Expand

echo '
  <div id="linkt">
      <div id="timef">', $context['current_time'], '<div>

        </div>';


what should i do???

[kat]

can you elaborate the idea some more, sounds interesting.

Well, I guess you'd need settings to enter the towns/cities and stuff, wouldn't you? Plus the time-offsets and stuff.

It's easy enough to edit them, manually, but I suspect that, as a mod, people would kinda expect it to be "Click this, click that".

[Joker™]

Code Select Expand

echo '
  <div id="linkt">
      <div id="timef">', $context['current_time'], '<div>

        </div>';


what should i do???

Try this

Code Select Expand

echo '<div id="linkt">

<div id="timef">',timeformat(time(),'%B, %d, %Y'), '
<div id="clock">Loading...</div>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "pm"}
else {am_pm="am"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
</script></div></div>';

[Joker™]

Well, I guess you'd need settings to enter the towns/cities and stuff, wouldn't you? Plus the time-offsets and stuff.

It's easy enough to edit them, manually, but I suspect that, as a mod, people would kinda expect it to be "Click this, click that".

very nice idea we can work on that.

[kat]

[lucas-ruroken]

I can't view it in your forum  Joker™

[Joker™]

http://www.simplemachines.org/community/index.php?topic=398860.msg2770969#msg2770969

[lucas-ruroken]

Thanks, perfect.

Greetings

[Manu.G]

I want to use this for the forum I'm running too, but I don't know how to use it, cause I changed a lot.
Can you help me please?

That's the part where the clock in my forum is

Code Select Expand

// display the time
    echo '
                    <span class="smalltext">' , $context['current_time'], '<br /><br />';
                template_language_select();
    echo '</td>';

Thanks in advance for your help!

[Joker™]

see the original code , you just need to replace this much.

Code Select Expand

' , $context['current_time'], '

Code Select Expand

',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "pm"}
else {am_pm="am"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
give it one more try