Advertisement:

Author Topic: Live clock in header  (Read 96301 times)

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Live clock in header
« on: September 02, 2010, 10:47:59 AM »
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]
echo '
<li>', $context['current_time'], '</li>
</ul>';

Replace it with:
Code: [Select]
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"
« Last Edit: January 09, 2011, 07:47:58 AM by Joker™ »
Github Profile
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

Offline xenovanis

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,988
  • Gender: Female
Re: Live clock in header
« Reply #1 on: September 02, 2010, 12:02:55 PM »
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."

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #2 on: September 02, 2010, 12:15:34 PM »
you need to login to see it . this is the screen shot

Github Profile
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

kat

  • Guest
Re: Live clock in header
« Reply #3 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.

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #4 on: September 02, 2010, 12:48:42 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
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

kat

  • Guest
Re: Live clock in header
« Reply #5 on: September 02, 2010, 01:05:21 PM »
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]
<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>

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #6 on: September 02, 2010, 01:23:21 PM »
Thanks for the code , will surely try to tweak it 8) .
Github Profile
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

kat

  • Guest
Re: Live clock in header
« Reply #7 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.

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #8 on: September 02, 2010, 09:52:21 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
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

Offline MaxwellsHouse

  • Semi-Newbie
  • *
  • Posts: 23
Re: Live clock in header
« Reply #9 on: September 03, 2010, 08:42:49 AM »
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

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: Live clock in header
« Reply #10 on: September 03, 2010, 01:13:43 PM »
Code: [Select]
echo '
  <div id="linkt">
      <div id="timef">', $context['current_time'], '<div>

        </div>';

what should i do???

kat

  • Guest
Re: Live clock in header
« Reply #11 on: September 03, 2010, 01:20:36 PM »
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".

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #12 on: September 03, 2010, 02:14:41 PM »
Code: [Select]
echo '
  <div id="linkt">
      <div id="timef">', $context['current_time'], '<div>

        </div>';

what should i do???

Try this
Code: [Select]
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
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #13 on: September 03, 2010, 02:15:59 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
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

kat

  • Guest
Re: Live clock in header
« Reply #14 on: September 03, 2010, 03:37:18 PM »

Offline lucas-ruroken

  • SMF Hero
  • ******
  • Posts: 4,907
  • Gender: Male
  • Adk Developer
    • lucas.ruroken on Facebook
    • lucasruroken on GitHub
Re: Live clock in header
« Reply #15 on: September 08, 2010, 10:06:03 PM »
I can't view it in your forum  Joker™ ::)
Adk Portal 3.1 is coming....

Design your universe!

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Github Profile
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved

Offline lucas-ruroken

  • SMF Hero
  • ******
  • Posts: 4,907
  • Gender: Male
  • Adk Developer
    • lucas.ruroken on Facebook
    • lucasruroken on GitHub
Re: Live clock in header
« Reply #17 on: September 08, 2010, 11:58:38 PM »
Thanks, perfect.

Greetings ;)
Adk Portal 3.1 is coming....

Design your universe!

Offline Manu.G

  • Full Member
  • ***
  • Posts: 448
  • Gender: Female
  • Angel by Day, Devil by Night
    • http://facebook.com/manuela.guth on Facebook
    • Fan Community
Re: Live clock in header
« Reply #18 on: September 09, 2010, 10:57:37 AM »
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]
// 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

Offline Joker™

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,914
  • Gender: Male
    • siddhartha-gupta on GitHub
Re: Live clock in header
« Reply #19 on: September 09, 2010, 11:02:38 AM »
see the original code , you just need to replace this much.

Code: [Select]
' , $context['current_time'], '
Code: [Select]
',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
My Mods
How to enable Post Moderation
Paid Support
Elkarte


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

All support seeking PM's get microwaved