Live clock in header

Started by Joker™, September 02, 2010, 10:47:59 AM

Previous topic - Next topic

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:
echo '
<li>', $context['current_time'], '</li>
</ul>';


Replace it with:
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"
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

xenovanis

Hi Joker™  :)

Thanks for sharing. I visited your site but I can't find the clock.  ??? Is it me?
"Insanity: doing the same thing over and over again and expecting different results."

Joker™

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

Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

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™

Quote from: K@ on September 02, 2010, 12:44:37 PM
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).
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

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:

<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 8) .
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

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™

Quote from: K@ on September 02, 2010, 03:02:54 PM
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.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

MaxwellsHouse

Quote from: K@ on September 02, 2010, 03:02:54 PM
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"  :D

!RFAN

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

        </div>';


what should i do???

kat

Quote from: Joker™ on September 02, 2010, 09:52:21 PMcan 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™

Quote from: !RFAN on September 03, 2010, 01:13:43 PM
echo '
  <div id="linkt">
      <div id="timef">', $context['current_time'], '<div>

        </div>';


what should i do???

Try this
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>';
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Joker™

Quote from: K@ on September 03, 2010, 01:20:36 PM
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.
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved


lucas-ruroken

I can't view it in your forum  Joker™ ::)
Adk Portal 3.1 is coming....

Design your universe!

Joker™

Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

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 :)
// display the time
    echo '
                    <span class="smalltext">' , $context['current_time'], '<br /><br />';
                template_language_select();
    echo '</td>';


Thanks in advance for your help! :)
Version SMF 2.0.8
SimplePortal 2.3.5

Joker™

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

' , $context['current_time'], '

',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 ;)
Github Profile
Android apps
Medium

How to enable Post Moderation

"For the wise man looks into space and he knows there is no limited dimensions." - Laozi

All support seeking PM's get microwaved

Advertisement: