Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Joker™ on September 02, 2010, 10:47:59 AM

Title: Live clock in header
Post by: Joker™ 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:
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"
Title: Re: Live clock in header
Post by: xenovanis 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?
Title: Re: Live clock in header
Post by: Joker™ on September 02, 2010, 12:15:34 PM
you need to login to see it . this is the screen shot

(http://img42.imageshack.us/img42/5136/43144170.png)
Title: Re: Live clock in header
Post by: kat 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.
Title: Re: Live clock in header
Post by: Joker™ on September 02, 2010, 12:48:42 PM
Quote from: [email protected] 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).
Title: Re: Live clock in header
Post by: kat 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:

<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>
Title: Re: Live clock in header
Post by: Joker™ on September 02, 2010, 01:23:21 PM
Thanks for the code , will surely try to tweak it 8) .
Title: Re: Live clock in header
Post by: kat 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.
Title: Re: Live clock in header
Post by: Joker™ on September 02, 2010, 09:52:21 PM
Quote from: [email protected] 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.
Title: Re: Live clock in header
Post by: MaxwellsHouse on September 03, 2010, 08:42:49 AM
Quote from: [email protected] 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
Title: Re: Live clock in header
Post by: !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???
Title: Re: Live clock in header
Post by: kat on September 03, 2010, 01:20:36 PM
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".
Title: Re: Live clock in header
Post by: Joker™ on September 03, 2010, 02:14:41 PM
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>';
Title: Re: Live clock in header
Post by: Joker™ on September 03, 2010, 02:15:59 PM
Quote from: [email protected] 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.
Title: Re: Live clock in header
Post by: kat on September 03, 2010, 03:37:18 PM
(http://www.augk18.dsl.pipex.com/Smileys/c014.gif)
Title: Re: Live clock in header
Post by: lucas-ruroken on September 08, 2010, 10:06:03 PM
I can't view it in your forum  Joker™ ::)
Title: Re: Live clock in header
Post by: Joker™ on September 08, 2010, 10:55:48 PM
http://www.simplemachines.org/community/index.php?topic=398860.msg2770969#msg2770969
Title: Re: Live clock in header
Post by: lucas-ruroken on September 08, 2010, 11:58:38 PM
Thanks, perfect.

Greetings ;)
Title: Re: Live clock in header
Post by: Manu.G 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 :)
// display the time
    echo '
                    <span class="smalltext">' , $context['current_time'], '<br /><br />';
                template_language_select();
    echo '</td>';


Thanks in advance for your help! :)
Title: Re: Live clock in header
Post by: Joker™ on September 09, 2010, 11:02:38 AM
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 ;)
Title: Re: Live clock in header
Post by: Manu.G on September 09, 2010, 11:12:52 AM
Works like a charme! :D

http://forum.arsenie.net

Thanks a lot for your help :D
Title: Re: Live clock in header
Post by: Joker™ on September 09, 2010, 11:16:20 AM
Quote from: Manu.G on September 09, 2010, 11:12:52 AM
Works like a charme! :D

http://forum.arsenie.net

Thanks a lot for your help :D
Glad i could help someone :).
Title: Re: Live clock in header
Post by: LHW on September 09, 2010, 11:51:47 AM
Ditto.  Thanks, Joker!  :)
Title: Re: Live clock in header
Post by: KensonPlays on September 09, 2010, 12:28:08 PM
Joker, possible to use some code and make a small analog clock with hands? is that possible?
Title: Re: Live clock in header
Post by: Joker™ on September 09, 2010, 12:31:35 PM
Quote from: Kcmartz on September 09, 2010, 12:28:08 PM
Joker, possible to use some code and make a small analog clock with hands? is that possible?
no idea in my mind how to code that . Also think that it wouldn't be visible clearly at all due to size factor.
Title: Re: Live clock in header
Post by: KensonPlays on September 09, 2010, 12:38:31 PM
There are JS or DHTML scripts that do something like that, with your mouse on a website, it follows your mouse or something. But if you could do that, I would probably apply it to every SMF forum I create!
Title: Re: Live clock in header
Post by: Joker™ on September 09, 2010, 01:46:24 PM
Quote from: Joker™ on September 09, 2010, 12:31:35 PM
no idea in my mind how to code that .
Title: Re: Live clock in header
Post by: TheListener on September 09, 2010, 09:07:57 PM
Looks good Joker

Is there any strain on the server?

By the way ya may have to shout a bit louder before kcmartz starts to listen.

Also what about the option of a 24 hour clock?
Title: Re: Live clock in header
Post by: Joker™ on September 10, 2010, 12:10:12 AM
Quote from: Brack1 on September 09, 2010, 09:07:57 PM
Looks good Joker
Thanks

QuoteIs there any strain on the server?
My site is no shared server and it is running absolutely fine :).

QuoteBy the way ya may have to shout a bit louder before kcmartz starts to listen.
Naah , he won't ask again.

QuoteAlso what about the option of a 24 hour clock?
Just have to remove am pm code from JS code.
Title: Re: Live clock in header
Post by: KensonPlays on September 10, 2010, 01:46:18 AM
What about a clock that has blinking colons and changes colors :P
Title: Re: Live clock in header
Post by: Joker™ on September 10, 2010, 02:20:45 AM
Quote from: Kcmartz on September 10, 2010, 01:46:18 AM
What about a clock that has blinking colons and changes colors :P
? ? ? ? ? Joker™ can't read minds
Title: Re: Live clock in header
Post by: TheListener on September 10, 2010, 08:21:28 AM
Quote from: Kcmartz on September 10, 2010, 01:46:18 AM
What about a clock that has blinking colons and changes colors :P

You were saying?




EDIT: The edit is now working on my test forum.


Title: Re: Live clock in header
Post by: wcharlot on September 11, 2010, 03:10:58 AM
this is really a good job! 8)

i have applied it and it is the coolest!

I love that live clock on my header.  :) ;) :D ;D 8)
Title: Re: Live clock in header
Post by: Hj Ahmad Rasyid Hj Ismail on September 11, 2010, 07:50:58 AM
A very nice mod. I will surely try this out soonest.
Title: Re: Live clock in header
Post by: Joker™ on September 11, 2010, 09:40:04 AM
Quote from: wcharlot on September 11, 2010, 03:10:58 AM
this is really a good job! 8)

i have applied it and it is the coolest!

I love that live clock on my header.  :) ;) :D ;D 8)
thanks for nice comments ;D

Quote from: ahrasis on September 11, 2010, 07:50:58 AM
A very nice mod. I will surely try this out soonest.
not a mod , but thanks for nice comments ;)
Title: Re: Live clock in header
Post by: Zirc on September 11, 2010, 03:01:03 PM
How would I get it to display all on one line?  Date -> Time

Thanks
Title: Re: Live clock in header
Post by: Hj Ahmad Rasyid Hj Ismail on September 11, 2010, 03:48:14 PM
Hmm... I cannot get the date and time display in line. The date is displayed above the time. How do i get it displayed inline instead. Here is my site link http://ahrasis.com

My index.template.php is being modified so that it can display smf date and time which is now replaced by your live clock mod in this line:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;

    echo '
        <div id="main_menu"><div style="font-size:0.9em; float:right; color:white;">',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></div>
        <h1 class="forumtitle"><a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a></h1>
            <ul class="whitemenu" id="menu_nav">';

    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                <li id="button_', $act, '">
                    <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                        <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
                    </a>';
        if (!empty($button['sub_buttons']))
        {
            echo '
                    <ul>';

            foreach ($button['sub_buttons'] as $childbutton)
            {
                echo '
                        <li>
                            <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                            </a>';
                // 3rd level menus :)
                if (!empty($childbutton['sub_buttons']))
                {
                    echo '
                            <ul>';

                    foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                        echo '
                                <li>
                                    <a', $grandchildbutton['active_button'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                        <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                    </a>
                                </li>';

                    echo '
                        </ul>';
                }

                echo '
                        </li>';
            }
            echo '
                    </ul>';
        }
        echo '
                </li>';
    }

    echo '
            </ul>
        </div>';
}
Title: Re: Live clock in header
Post by: Joker™ on September 11, 2010, 11:17:42 PM
For date and time to be in one line

themes\default\index.template.php
Find:
echo '
<li>', $context['current_time'], '</li>
</ul>';


Replace: echo '

<li>',timeformat(time(),'%B, %d, %Y'), '
<font id="clock">Loading...</font>
<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>
</li></ul>';


I've just replace <li> to <font> tag.
Title: Re: Live clock in header
Post by: Hj Ahmad Rasyid Hj Ismail on September 12, 2010, 06:47:26 AM
Cool. It works like a charm. I now have a live clock on my site. Thanks a million.

I dont like the comma and the format so I changed from ' ,timeformat(time(),'%B, %d, %Y'), ' to ' ,timeformat(time(),'%d %B %Y'), '.
Title: Re: Live clock in header
Post by: Joker™ on September 12, 2010, 06:47:54 AM
Quote from: ahrasis on September 12, 2010, 06:47:26 AM
Cool. It works like a charm. I now have a live clock on my site. Thanks a million.
your welcome ;)
Title: Re: Live clock in header
Post by: Pinball Nation on September 12, 2010, 07:50:54 AM
Quote from: [email protected] 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:

<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>

Hello i am interested in adding this clock.Am i suppose to find this code          echo '
               <li>', $context['current_time'], '</li>
            </ul>';
and replace it with the code above.Is this correct?
Title: Re: Live clock in header
Post by: robbie93 on September 12, 2010, 11:04:20 AM
Hi Joker, the clock is out of sync when viewing who is online.

cant attach screen shot to show you the problem, but the clock up top says 04.03 pm but when viewing online it says 03.03pm.
Title: Re: Live clock in header
Post by: Joker™ on September 12, 2010, 12:18:03 PM
Quote from: Pinball Nation on September 12, 2010, 07:50:54 AM
Quote from: [email protected] 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:

<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>

Hello i am interested in adding this clock.Am i suppose to find this code          echo '
               <li>', $context['current_time'], '</li>
            </ul>';
and replace it with the code above.Is this correct?
haven't tested it yet , [email protected] can give you better idea.


Quote from: robbie93 on September 12, 2010, 11:04:20 AM
Hi Joker, the clock is out of sync when viewing who is online.

cant attach screen shot to show you the problem, but the clock up top says 04.03 pm but when viewing online it says 03.03pm.
For me it's working fine , give me ur site link.
Title: Re: Live clock in header
Post by: robbie93 on September 12, 2010, 01:12:13 PM
Here is the url, http://robbie93andhotchildxox.net/index.php?action=who
Title: Re: Live clock in header
Post by: Joker™ on September 12, 2010, 01:29:10 PM
Quote from: robbie93 on September 12, 2010, 01:12:13 PM
Here is the url, http://robbie93andhotchildxox.net/index.php?action=who
for me it worked absolutely fine . As your other members and see if they are also facing the same issue .
Title: Re: Live clock in header
Post by: robbie93 on September 12, 2010, 01:54:45 PM
Quote from: Joker™ on September 12, 2010, 01:29:10 PM
Quote from: robbie93 on September 12, 2010, 01:12:13 PM
Here is the url, http://robbie93andhotchildxox.net/index.php?action=who
for me it worked absolutely fine . As your other members and see if they are also facing the same issue .

Hmm, I just asked my fellow admin, and she is seeing the same as me, how come we both are seeing this and you arent? what could be causing that? ( she is in the U.S and i'm in the UK atm so it isnt a pc related problem. )
Title: Re: Live clock in header
Post by: Joker™ on September 12, 2010, 10:31:32 PM
Quote from: robbie93 on September 12, 2010, 01:54:45 PM
Quote from: Joker™ on September 12, 2010, 01:29:10 PM
Quote from: robbie93 on September 12, 2010, 01:12:13 PM
Here is the url, http://robbie93andhotchildxox.net/index.php?action=who
for me it worked absolutely fine . As your other members and see if they are also facing the same issue .

Hmm, I just asked my fellow admin, and she is seeing the same as me, how come we both are seeing this and you arent? what could be causing that? ( she is in the U.S and i'm in the UK atm so it isnt a pc related problem. )
i think you removed the clock ?
Title: Re: Live clock in header
Post by: wcharlot on September 12, 2010, 10:39:26 PM
This is the coolest tweek that I have ever seen today.. the clock is really nice and useful especially to visitors.
Title: Re: Live clock in header
Post by: robbie93 on September 13, 2010, 12:38:00 AM
Quote from: Joker™ on September 12, 2010, 10:31:32 PM
i think you removed the clock ?

Yes I removed it because it was out of sync with the forum time, if you know how to fix it I would like to add it back because, as the man above just said,
Quote from: wcharlot on September 12, 2010, 10:39:26 PM
This is the coolest tweek that I have ever seen today..

;D
Title: Re: Live clock in header
Post by: Joker™ on September 13, 2010, 09:00:42 AM
Quote from: wcharlot on September 12, 2010, 10:39:26 PM
This is the coolest tweek that I have ever seen today.. the clock is really nice and useful especially to visitors.
thanks

Quote from: robbie93 on September 13, 2010, 12:38:00 AM
Yes I removed it because it was out of sync with the forum time, if you know how to fix it I would like to add it back because, as the man above just said,
Quote from: wcharlot on September 12, 2010, 10:39:26 PM
This is the coolest tweek that I have ever seen today..
;D
wait what forum time ? clock does have concern with your forum time . Just try to replicate the issue , and give me a detail description about it , as i can only help if i can see error myself (in most cases :P).
Title: Re: Live clock in header
Post by: Joker™ on September 17, 2010, 04:55:27 AM
http://www.timeanddate.com/clocks/free.html

Found this site while surfing , might help some of you guys :).
Title: Re: Live clock in header
Post by: Afro on September 17, 2010, 12:16:10 PM
Cool tweak Joker. I will add that.
Title: Re: Live clock in header
Post by: Joker™ on September 17, 2010, 12:48:31 PM
Quote from: Afro on September 17, 2010, 12:16:10 PM
Cool tweak Joker. I will add that.
yeah after default avatar mod this one is my fav tweak ;).
Title: Re: Live clock in header
Post by: Xantheon on September 30, 2010, 07:26:50 AM
Thanks for this! Good job :)
Title: Re: Live clock in header
Post by: rocknroller on October 01, 2010, 09:02:31 AM
Heloo Joker, nice mod,

can you make it work with Croatian time, (not am, pm) maybe you can change this script to show 24 hours time.,  like 2:30pm = 14:30.

I need just clock without date and time zone

now, I use one free script for clock, but i have problems, script what i use require some code to be added in body tag.
Title: Re: Live clock in header
Post by: Joker™ on October 01, 2010, 01:06:05 PM
Quote from: rocknroller on October 01, 2010, 09:02:31 AM
Heloo Joker, nice mod,

can you make it work with Croatian time, (not am, pm) maybe you can change this script to show 24 hours time.,  like 2:30pm = 14:30.

I need just clock without date and time zone

now, I use one free script for clock, but i have problems, script what i use require some code to be added in body tag.

The basic funda of clock is this only that it is not region time specific, it'll show the user it's region time automatically. As far as am, pm is concerned you just have to play with the am/pm code in it (remove it ,slash it ,in short do something funny with it :P).
Title: Re: Live clock in header
Post by: rocknroller on October 01, 2010, 04:19:31 PM
i am figured out, this is code for 24 hour time.

find:
<li>', $context['current_time'], '</li>

replace:
<li>',timeformat(time(),'%B, %d, %Y'), '
<li id="sat">Učitavanje...</li> 
<script language="JavaScript">
function init(){
  timeDisplay = document.createTextNode ("");
  document.getElementById("sat").appendChild (timeDisplay);
}

function prikaziSat(){
var trenutnoVreme = new Date();
var sati = trenutnoVreme.getHours();
var minuti = trenutnoVreme.getMinutes();
var sekunde = trenutnoVreme.getSeconds();

  minuti    = (minuti < 10 ? "0" : "") + minuti;
  sekunde = (sekunde < 10 ? "0" : "") + sekunde;
  sati    = (sati < 10 ? "0" : "") + sati;

document.getElementById("sat").innerHTML= sati + ":" + minuti + ":" + sekunde;
setTimeout("prikaziSat()",1000);
}
prikaziSat();
</script>
</li>


Edit: added instructions for curve theme.
Title: Re: Live clock in header
Post by: visualuser on October 02, 2010, 06:05:51 AM
check my clock,
www.steki-psychologias.gr at the right bottom.
It is visible to anyone.


Be in your mind that my forum is about psychology.....
Title: Re: Live clock in header
Post by: Joker™ on October 10, 2010, 04:13:44 AM
Quote from: visualuser on October 02, 2010, 06:05:51 AM
check my clock,
www.steki-psychologias.gr at the right bottom.
It is visible to anyone.
Not visible to me.
Title: Re: Live clock in header
Post by: visualuser on October 10, 2010, 06:39:52 AM
Quote from: Joker™ on October 10, 2010, 04:13:44 AM
Quote from: visualuser on October 02, 2010, 06:05:51 AM
check my clock,
www.steki-psychologias.gr at the right bottom.
It is visible to anyone.
Not visible to me.


that is not possible,
clock is on the right side and it is visible to visitors....
so maybe it does not loading your broswer or other problem.
Title: Re: Live clock in header
Post by: Joker™ on October 10, 2010, 07:25:24 AM
Quote from: visualuser on October 10, 2010, 06:39:52 AM
that is not possible,
clock is on the right side and it is visible to visitors....
so maybe it does not loading your browser or other problem.
It means my all browsers have gone corrupt :P. TBH i thought you were asking us that whether or not we can see the clock or not, and still my answer is,"I can't see your clock (right hand side bottom)".
Title: Re: Live clock in header
Post by: xenovanis on October 10, 2010, 02:44:31 PM
Can't see it either.
Title: Re: Live clock in header
Post by: visualuser on October 11, 2010, 01:22:14 AM
try to login by test - test,
and tell me if now is ok.
Title: Re: Live clock in header
Post by: Joker™ on October 11, 2010, 01:34:34 AM
Quote from: visualuser on October 11, 2010, 01:22:14 AM
try to login by test - test,
and tell me if now is ok.
Still no.
Can you see it on a normal account (not on an admin account)?
What code are you exactly using to make the clock?
Title: Re: Live clock in header
Post by: visualuser on October 11, 2010, 02:24:27 AM
Quote from: Joker™ on October 11, 2010, 01:34:34 AM
Quote from: visualuser on October 11, 2010, 01:22:14 AM
try to login by test - test,
and tell me if now is ok.
Still no.
Can you see it on a normal account (not on an admin account)?
What code are you exactly using to make the clock?


so it is not a problem of smf restrictions....


the code is the follow,



</div><div class='widget HTML' id='HTML3'>

<div class='widget-content'>
<script src="http://widgets.clearspring.com/o/48ce7cdc6af09c41/49a72fec90affa95/48ce7cdc6af09c41/3818c1a1/widget.js" type="text/javascript"></script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>




normally if you save this on a html file you will see the clock.
Title: Re: Live clock in header
Post by: Joker™ on October 11, 2010, 02:40:26 AM
Quote from: visualuser on October 11, 2010, 02:24:27 AM
so it is not a problem of smf restrictions....

the code is the follow,
hahaha, now i got what you are referring as clock. First if all it's not in bottom , it's in right hand side middle position. Secondly i was watching it for about 20 mins yesterday :P, so you can call me a culprit also. But you should have mentioned the style of clock you are referring to in first place as it is a very unusual clock. I think we all were searching for a digital or analog clock on your forum. Hmmm, so visualuser is talking about this clock (see the pic)

(http://img339.imageshack.us/img339/3787/99801963.png)

and yes it is visible as guest also.
Title: Re: Live clock in header
Post by: visualuser on October 11, 2010, 02:55:59 AM
well our missunderstood finally solved...

8) 8) 8)


hope you like this type of clock.

(as i mention before, my foroum is about psychology, so a normal analog clock does not fit....   :P )
Title: Re: Live clock in header
Post by: Joker™ on October 11, 2010, 03:00:34 AM
Quote from: visualuser on October 11, 2010, 02:55:59 AM
well our missunderstood finally solved...

8) 8) 8)

hope you like this type of clock.

(as i mention before, my foroum is about psychology, so a normal analog clock does not fit....   :P )
yup the clock is very nice, but have to use a lot of brain to see the time in it at first :P.
Title: Re: Live clock in header
Post by: visualuser on October 11, 2010, 03:10:34 AM
Quote from: Joker™ on October 11, 2010, 03:00:34 AM



but have to use a lot of brain to see the time in it at first :P.

if this happen,
means that the clock is functioning excellent!!!

8)

Title: Re: Live clock in header
Post by: Masterd on October 17, 2010, 12:45:16 PM
Nice trick! :D
Title: Re: Live clock in header
Post by: Idiotji on December 02, 2010, 05:08:21 AM
joker bro it is not seen in rc4 so what is the code for rc4.i am using silent wave theme same as yours forum.
Title: Re: Live clock in header
Post by: Hj Ahmad Rasyid Hj Ismail on December 02, 2010, 05:36:07 AM
The code is the same Idiotji. It is still working in my 2.0 RC4 site.
Title: Re: Live clock in header
Post by: Idiotji on December 02, 2010, 01:53:16 PM
@ahrasis bro ya its working in curve theme but not working in silent wave theme by dziner studio
Title: Re: Live clock in header
Post by: Hj Ahmad Rasyid Hj Ismail on December 02, 2010, 02:41:32 PM
Was it working before in RC3?
Title: Re: Live clock in header
Post by: Idiotji on December 02, 2010, 11:55:56 PM
@ahrasis  bro see in the jokers bro website its working great.And i have change code in both default and custom theme of index.template.php.
Its working in curve theme but not in custom theme.So what will have to do
Title: Re: Live clock in header
Post by: Masterd on December 03, 2010, 04:53:02 AM
I think that you need to enable the clock in the Theme Options.
Title: Re: Live clock in header
Post by: Joker™ on December 03, 2010, 06:46:50 AM
I don't think there will be a problem for RC4. Is silent wave out for RC4 yet?
Title: Re: Live clock in header
Post by: Idiotji on December 04, 2010, 04:25:40 AM
yes silent wave is awailable for rc4 they have same code for both but only changed the name i think lolz
Title: Re: Live clock in header
Post by: NanoSector on December 04, 2010, 04:43:49 AM
Mod package:

link removed at request

Install using the Package Manager.
Only works on 2.0 RC#.

Must install in every theme.
Title: Re: Live clock in header
Post by: Joker™ on December 04, 2010, 05:07:26 AM
Quote from: Idiotji on December 04, 2010, 04:25:40 AM
yes silent wave is awailable for rc4 they have same code for both but only changed the name i think lolz
Can you show me the link.

Quote from: Yoshi2889 on December 04, 2010, 04:43:49 AM
Mod package:

Removed

Install using the Package Manager.
Only works on 2.0 RC#.

Must install in every theme.
And who gave you the permission to convert it into a mod ? ?
I made this very clear in my very first post that no one is going to convert this into mod as the code is made with the help of one of my friend.
Please remove the package link.
Title: Re: Live clock in header
Post by: NanoSector on December 04, 2010, 05:12:56 AM
Quote from: Joker™ on December 04, 2010, 05:07:26 AM
Quote from: Idiotji on December 04, 2010, 04:25:40 AM
yes silent wave is awailable for rc4 they have same code for both but only changed the name i think lolz
Can you show me the link.

Quote from: Yoshi2889 on December 04, 2010, 04:43:49 AM
Mod package:

removed

Install using the Package Manager.
Only works on 2.0 RC#.

Must install in every theme.
And who gave you the permission to convert it into a mod ? ?
I made this very clear in my very first post that no one is going to convert this into mod as the code is made with the help of one of my friend.
Please remove the package link.
Ah ok sorry, didn't read the post very well...
Title: Re: Live clock in header
Post by: Joker™ on December 04, 2010, 07:20:00 AM
Quote from: Yoshi2889 on December 04, 2010, 05:12:56 AM
Ah ok sorry, didn't read the post very well...
Also the edit is very simple, so this should be done manually.

If we serve everything in plate users will become more lazy and will not be able to learn much ;).
Title: Re: Live clock in header
Post by: NanoSector on December 04, 2010, 07:32:44 AM
Quote from: Joker™ on December 04, 2010, 07:20:00 AM
Quote from: Yoshi2889 on December 04, 2010, 05:12:56 AM
Ah ok sorry, didn't read the post very well...
Also the edit is very simple, so this should be done manually.

If we serve everything in plate users will become more lazy and will not be able to learn much ;).
Yes that also is true ;)
Title: Re: Live clock in header
Post by: Idiotji on December 04, 2010, 11:47:08 PM
@joker bro here is the link for silent wave for rc4 http://dzinerstudio.com/index.php?action=downloads;sa=downfile&id=87;t=1291524283
i tried all hehehe but all in vain.
Title: Re: Live clock in header
Post by: Joker™ on December 05, 2010, 12:10:01 AM
Quote from: Idiotji on December 04, 2010, 11:47:08 PM
@joker bro here is the link for silent wave for rc4 http://dzinerstudio.com/index.php?action=downloads;sa=downfile&id=87;t=1291524283
i tried all hehehe but all in vain.
The clock is shown to guests only as per the theme  coding, you just have to get the clock code out of that guest loop.

Find:
else
{
echo sprintf($txt['welcome_guest'], $txt['guest_title']);

echo '
<br />', $context['current_time'],'<br />';
}



Replace it with:
else
{
echo sprintf($txt['welcome_guest'], $txt['guest_title']);
}
echo '
',timeformat(time(),'%B, %d, %Y'), '
                                                                      <font id="clock">Loading...</font>
                                                                      <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>';
Title: Re: Live clock in header
Post by: Idiotji on December 06, 2010, 12:14:41 AM
Thanks joker bro you are such a great coder  ;)
Even though you are not fast now days you are the best ;D ;D ;D ;D
Title: Re: Live clock in header
Post by: Joker™ on December 06, 2010, 05:05:24 AM
Quote from: Idiotji on December 06, 2010, 12:14:41 AM
Even though you are not fast now days
Work pressure my friend work pressure ;)
Title: Re: Live clock in header
Post by: DSK-Googler on December 18, 2010, 07:41:32 AM
 i cant find this in silent wave theme/index.template.php


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

Title: Re: Live clock in header
Post by: NanoSector on December 18, 2010, 07:49:11 AM
Quote from: sureshdsk on December 18, 2010, 07:41:32 AM
i cant find this in silent wave theme/index.template.php


echo '
               <li>', $context['current_time'], '</li>
            </ul>';
Search for $context['current_time'] .
Title: Re: Live clock in header
Post by: Joker™ on December 18, 2010, 07:58:12 AM
Quote from: sureshdsk on December 18, 2010, 07:41:32 AM
i cant find this in silent wave theme/index.template.php


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


Solution is just 2 posts above you
http://www.simplemachines.org/community/index.php?topic=398860.msg2871706#msg2871706
Title: Re: Live clock in header
Post by: DSK-Googler on December 18, 2010, 08:11:35 AM
works :) thanks
Title: Re: Live clock in header
Post by: jekwumoore on December 19, 2010, 04:24:02 AM
This is good code,thanks for the info
Title: Re: Live clock in header
Post by: Joker™ on January 09, 2011, 07:50:18 AM
I've made a minute change in the code to make it compatible with "W3C Markup Validation" and original post code has been modified accordingly. New code can be found here;
Original post (http://www.simplemachines.org/community/index.php?topic=398860.msg2770876#msg2770876)
Title: Re: Live clock in header
Post by: beast44 on January 20, 2011, 05:21:01 PM
This code is new to me. I'm working with it and learning a little at a time. I will get it right, down the road a ways. Hey! I'm a 67 year old man, that didn't even know what a PC was till about 10 years ago. I'm learning  :D ;D

:D ;D
Title: Re: Live clock in header
Post by: hcfwesker on January 21, 2011, 12:46:44 AM
Works brilliantly, as do all your modifications, Joker™!

thanx a lot! :)
Title: Re: Live clock in header
Post by: Joker™ on January 21, 2011, 02:14:55 AM
Quote from: beast44 on January 20, 2011, 05:21:01 PM
This code is new to me. I'm working with it and learning a little at a time. I will get it right, down the road a ways. Hey! I'm a 67 year old man, that didn't even know what a PC was till about 10 years ago. I'm learning  :D ;D

:D ;D
If you require any assistance with the code do post here. (I myself using PC on a serious note from past 3 yrs only :P)

Quote from: hcfwesker on January 21, 2011, 12:46:44 AM
Works brilliantly, as do all your modifications, Joker™!

thanx a lot! :)
Your welcome :).
Title: Re: Live clock in header
Post by: beast44 on January 21, 2011, 07:44:38 AM
Ok Joker. Please bear with me. I'm not the sharpest nail in the sack. I tried installing what you said and I'm doing something wrong
I'm running SMF 2.0 RC3
I went in and found

  echo '
            ', $context['current_time'], '.
         </div>';

What part of that do I delete and replace with what? 

This Is what I would like to show

<iframe src="http://free.timeanddate.com/clock/i2fagq4u/n184" frameborder="0" width="82" height="18"></iframe>

Is that Possable?

:-[ :-[
Title: Re: Live clock in header
Post by: Joker™ on January 21, 2011, 08:04:15 AM
Try this code

Find (the code you typed above):
  echo '
            ', $context['current_time'], '.
         </div>';


Replace it with:
  echo '
            ', 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></div>';
Title: Re: Live clock in header
Post by: beast44 on January 21, 2011, 08:19:53 AM
HEY!!! IT WORKS Thank you, thank you, I'm like a kid with a new bag of candy. With your help I finely did something right

:D ;D
Title: Re: Live clock in header
Post by: Joker™ on January 21, 2011, 08:25:43 AM
Glad it got sorted for you :P.
Title: Re: Live clock in header
Post by: beast44 on January 23, 2011, 07:51:44 AM
Hey Joker, or anybody. I installed the clock and love it. I also installed a Hit Counter. My board is so slow that I can't even get on it half the time. Could it be what I installed? or mabe my host???

:D ;D
Title: Re: Live clock in header
Post by: beast44 on January 23, 2011, 02:56:53 PM
Its fixed. My host was making some upgrades

:D ;D
Title: Re: Live clock in header
Post by: henrik1782 on February 02, 2011, 05:15:37 AM
Hi Joker...

Tried the code but it only shows Loading...

Any idea... Running SMF 2.0RC4curve theme
Title: Re: Live clock in header
Post by: Joker™ on February 02, 2011, 08:18:34 AM
What looking at what you did exactly I can't comment on anything.
Title: Re: Live clock in header
Post by: beast44 on February 02, 2011, 11:08:31 AM
Quote from: henrik1782 on February 02, 2011, 05:15:37 AM
Hi Joker...

Tried the code but it only shows Loading...

Any idea... Running SMF 2.0RC4curve theme

Here is what I did to mine and it works perfect


         // But, let's always show minutes - Time wasted here: 0 minutes ;).
         echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '<br />';
      }
   
      echo '
</li><iframe src="http://free.timeanddate.com/clock/i2fagq4u/n184" frameborder="0" width="82" height="18"></iframe>

         </div>';   

  echo '
<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><a href="http://www.hit-counter-download.com/" target="_blank"><img src="http://www.hit-counter-download.com/cgi-bin/image.pl?URL=205428-5943" alt="download hit counter" title="download hit counter" border="0" /></a></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #330000; text-decoration: none;"> <a href="http://www.hit-counter-download.com/website-design.html" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #555555; text-decoration: none;" title="website design">website design</a> </font></td></tr></table>

          </div>';

Look and find that code and add the code I have in red just as I did above. Course don't make it in red  :D ;D It worked perfect on mine. Thanks to Joker

:D ;D
Title: Re: Live clock in header
Post by: henrik1782 on February 02, 2011, 06:34:17 PM
Hi Joker... and beast 44

Sorry sorry... my mistake. Went through the code and I have made some mistakes....

Worked just as it should. Nice work joker.


Best regards
Henrik
Title: Re: Live clock in header
Post by: beast44 on February 02, 2011, 08:34:28 PM
Did you use the code Joker gave? The reason I ask is I had my google ads show up saying it was loading and they would never show up

:D ;D
Title: Re: Live clock in header
Post by: henrik1782 on February 03, 2011, 07:14:54 PM
Hi beast44...

Yes I just used the code from Joker.

My problem was that when I took the code from Jokers attachment and put it into Notepad ++ it did not make the linebread and I had to make them manually. I went through the code and found some that I had forgot and made the linkebreaks and everything worked fine.
Title: Re: Live clock in header
Post by: Bugo on February 07, 2011, 02:30:14 PM
What do you think about this (http://ruseller.com/lessons/les904/demo/index.html)?
Title: Re: Live clock in header
Post by: NanoSector on February 07, 2011, 02:35:22 PM
Quote from: Bugo on February 07, 2011, 02:30:14 PM
What do you think about this (http://ruseller.com/lessons/les904/demo/index.html)?
Which is just a static image.
Title: Re: Live clock in header
Post by: Joker™ on February 07, 2011, 10:10:50 PM
Quote from: Simple Series team on February 07, 2011, 02:35:22 PM
Quote from: Bugo on February 07, 2011, 02:30:14 PM
What do you think about this (http://ruseller.com/lessons/les904/demo/index.html)?
Which is just a static image.
+1
Title: Re: Live clock in header
Post by: Bugo on February 08, 2011, 12:49:33 AM
Enable JavaScript :)
Title: Re: Live clock in header
Post by: Joker™ on February 08, 2011, 05:15:28 AM
Opera 11 (see screen shot)

(http://img233.imageshack.us/img233/3637/16822075.png)
Title: Re: Live clock in header
Post by: Bugo on February 08, 2011, 05:35:59 AM
Sorry, only Firefox, Chrome, Safari.
Title: Re: Live clock in header
Post by: Joker™ on February 08, 2011, 05:45:37 AM
Quote from: Bugo on February 08, 2011, 05:35:59 AM
Sorry, only Firefox, Chrome, Safari.
Now this is called some pretty awesome work. Great work Bugo, keep it up ;).
Title: Re: Live clock in header
Post by: NanoSector on February 08, 2011, 10:33:09 AM
Quote from: Bugo on February 08, 2011, 05:35:59 AM
Sorry, only Firefox, Chrome, Safari.
Meh, now I see :P

Nice work.
Title: Re: Live clock in header
Post by: hcfwesker on February 28, 2011, 02:17:40 PM
Joker, I'm just curious if you were ever able to get the time zone changes in any of these versions, the one suggested by [email protected] on the first page.  I tried his code, but obviously I had no idea where to put it.
Title: Re: Live clock in header
Post by: Joker™ on March 01, 2011, 07:30:32 AM
I've not been in touch with this thread for quite a while, right now I'm trying to backup my data and save some of my work. If I get a chance I'll try [email protected]'s code by tonight.
Title: Re: Live clock in header
Post by: vakfikebirli on March 18, 2011, 01:35:00 PM
thanks. very nice codes
Title: Re: Live clock in header
Post by: TheListener on March 14, 2012, 12:35:26 PM
Still works for 2.0.2

Title: Re: Live clock in header
Post by: Chalky on March 21, 2012, 04:12:49 PM
Please help, how do I:

a) display the day of the week? (3 letter format preferred)
b) change the month to three letter format?
c) display st or th after the date number? (low priority)

Currently my clock displays as (http://sabrinova.com/index.php?action=dlattach;topic=5.0;attach=94;image)

I wanted 24 hour format with the date in British order and didn't want to display the seconds, so I have played around and my code currently looks like this:


timeformat(time(),'%d %B %Y'), '
<font id="clock">Loading...</font>
<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<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script> </li>
</ul>';


I have tried adding the variable %D for the day, but that just gives the whole date again as "03/21/12", and %M which should be the three letter month just gives the arbitrary number 8, so I can't figure out which formatting system this is using.

Thanks.
Title: Re: Live clock in header
Post by: Chalky on March 22, 2012, 07:09:35 PM
Bumpity-bump.  I'm sorry but this is really bugging me, we would rather have a static clock that shows the correct day rather than a live one that doesn't.  Please can anyone tell me what to do just to get the weekday showing, Thu, Fri, etc.?  It must be possible, but feeding in all the D and other letters I can find just isn't helping.
Title: Re: Live clock in header
Post by: riou on March 24, 2012, 06:42:11 PM
The code would be (of course you can change how it displays and such :p) :

<font id="clock">Loading...</font>
<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 day=new Array();
day[0]="Sun";
day[1]="Mon";
day[2]="Tue";
day[3]="Wed";
day[4]="Thu";
day[5]="Fri";
day[6]="Sat";
var a = day[d.getDay()];
var month=new Array();
month[0]="Jan";
month[1]="Feb";
month[2]="Mar";
month[3]="Apr";
month[4]="May";
month[5]="Jun";
month[6]="Jul";
month[7]="Aug";
month[8]="Sep";
month[9]="Oct";
month[10]="Nov";
month[11]="Dec";
var b = month[d.getMonth()];
var c=d.getFullYear();
var e=d.getDate();
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s + " " + a + " " + b + " " + e + " " + c;
setTimeout("refrClock()",1000);
}
refrClock();
// ]]></script>
Title: Re: Live clock in header
Post by: Chalky on March 24, 2012, 09:42:14 PM
Wonderful thank you  :D

I just woke up on the sofa so I shall have a play with this tomorrow - thank you :)
Title: Re: Live clock in header
Post by: TheListener on March 24, 2012, 09:44:10 PM
Quote from: Sabrinova on March 24, 2012, 09:42:14 PM
Wonderful thank you  :D

I just woke up on the sofa so I shall have a play with this tomorrow - thank you :)

Whatever were ya doing on the sofa?

:-[
Title: Re: Live clock in header
Post by: Chalky on March 24, 2012, 09:52:14 PM
Quote from: Old Fossil on March 24, 2012, 09:44:10 PM

Whatever were ya doing on the sofa?

:-[

Watching telly  - until I fell asleep O:)  :laugh:
Title: Re: Live clock in header
Post by: riou on March 25, 2012, 01:20:48 AM
Oh as for the st/th I am sure you can do an Array like the day/month and just add like


var date=new Array();
date[21]="21st";
date[24]="24th";
date[25]="25th";
var whatever = date[d.getDate()];

etc,etc,etc for each date
Title: Re: Live clock in header
Post by: Chalky on March 25, 2012, 07:50:22 AM
I have used your code and my clock is now working brilliantly - thank you  :D
Title: Re: Live clock in header
Post by: Joker™ on April 03, 2012, 11:03:02 PM
Apologies for not taking proper care of this topic. I haven't gone through all of the replies, but is anyone else seeking for help related to this topic?
Title: Re: Live clock in header
Post by: TheListener on April 11, 2012, 07:57:05 PM
Dynamite Joker that's what ya need.
Title: Re: Live clock in header
Post by: Joker™ on April 12, 2012, 01:31:20 PM
Quote from: Old Fossil on April 11, 2012, 07:57:05 PM
Dynamite Joker that's what ya need.
Lol, hahahaha
Title: Re: Live clock in header
Post by: ssullivan on May 23, 2012, 04:15:41 PM
I'm even considering adding it to my non-SMF sites as well... it's pretty sleek, and the code looks easy to maintain. Thanks a lot - if only I told you I was using w3schools' clock script (yeah... gonna microwave that code now :) )

PS. Yeah. Your signature made my day, as you could guess :)
Title: Re: Live clock in header
Post by: Joker™ on May 26, 2012, 10:52:52 AM
Glad you liked it.
Title: Re: Live clock in header
Post by: chia on October 29, 2012, 02:32:51 AM
So Im using this in my Clan Forum, Problem is, is that it is dynamic, i want it static to MSK Timezone, because that is was the servers / forums & majority of players are from, so we declare all times in MSK.
I know O Difference to Greenwich time (GMT) in hours Example: +0200
P Difference to Greenwich time (GMT) with colon between hours and minutes (added in PHP 5.1.3) Example: +02:00
T Timezone abbreviation Examples: EST, MDT ...
Z Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive. -43200 through 50400

Are all option for setting a timezone, i am just confused as to where i am supposed to add it.
Atm i have it working as a 24 hour clock, in d, m, y format

    echo '

               <li>',timeformat(time(),'%d, %m, %Y'), '
</br>
<font id="clock">Loading...</font>

<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var H=d.getHours();
document.getElementById("clock").innerHTML=H + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
      </li></ul>';
Title: Re: Live clock in header
Post by: Joker™ on October 31, 2012, 01:10:37 PM
Hi,chia

Wow just wow. Just wrote something similar today.

Code (Find:) Select

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



Code (Replace it with:) Select
echo '

<li>',timeformat(time(),'%B, %d, %Y'), '
<li id="clock">Loading...</li>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
function refrClock()
{
d = new Date();
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
nd = new Date(utc + (3600000*+2));
var s=nd.getSeconds();
var m=nd.getMinutes();
var h=nd.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>';


Timezone difference between MST and GMT is +2?
Lets see if this can help you as I've bad memory of remembering codes :P.
Title: Re: Live clock in header
Post by: kikwan on November 09, 2012, 05:55:59 AM
Thank for the code
Title: Re: Live clock in header
Post by: sayithoney on December 01, 2012, 12:42:41 PM
Quote from: Joker™ on September 09, 2010, 11:02:38 AM
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 ;)

Cool this works for me... But can u edit this script to show 24 hour format clock?
Title: Re: Live clock in header
Post by: Joker™ on December 01, 2012, 02:19:53 PM
Try this one (Make file backup before)

',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<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
Title: Re: Live clock in header
Post by: sayithoney on December 02, 2012, 01:17:24 PM
Quote from: Joker™ on December 01, 2012, 02:19:53 PM
Try this one (Make file backup before)

',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<10) {h="0" + h}
document.getElementById("clock").innerHTML=h + ":" + m + ":" + s;
setTimeout("refrClock()",1000);
}
refrClock();
</script>


Yap it works just fine :D Thanks :D
Title: Re: Live clock in header
Post by: jpbeauty on December 23, 2012, 03:50:36 AM
Beautiful style.
Title: Re: Live clock in header
Post by: Joker™ on December 23, 2012, 10:15:39 AM
FYI... mod (https://github.com/Joker-SMF/SMF-LiveClockInHeader) in progress ;).
Title: Re: Live clock in header
Post by: revwill on December 23, 2012, 11:08:13 AM
Hi Joker--nifty change.  Is there a way for it to seek to see the profile choice, as like I being in the military for so long I enjoy using military time or 24 hour time verses 12 hour time.  This way it would all be seeking info from the users profile and displaying as they had chosen.

Thanks

William
Title: Re: Live clock in header
Post by: Joker™ on December 23, 2012, 01:01:45 PM
Quote from: revwill on December 23, 2012, 11:08:13 AM
Hi Joker--nifty change.  Is there a way for it to seek to see the profile choice, as like I being in the military for so long I enjoy using military time or 24 hour time verses 12 hour time.  This way it would all be seeking info from the users profile and displaying as they had chosen.

Thanks

William

Quote from: Joker™ on December 23, 2012, 10:15:39 AM
FYI... mod (https://github.com/Joker-SMF/SMF-LiveClockInHeader) in progress ;).

Converting this into a mod. You'll get a lot of options in it ;).
Title: Re: Live clock in header
Post by: revwill on December 23, 2012, 01:52:59 PM
Awesome!  Thanks for all.  Happy and SAFE Holidays to you and yours!
Title: Re: Live clock in header
Post by: afrojaalam on January 31, 2013, 11:31:27 PM
Hi Joker,
Thank you for sharing a helpful code. 
Title: Re: Live clock in header
Post by: revwill on January 31, 2013, 11:42:45 PM
Quote from: Joker™ on December 23, 2012, 01:01:45 PM
Quote from: revwill on December 23, 2012, 11:08:13 AM
Hi Joker--nifty change.  Is there a way for it to seek to see the profile choice, as like I being in the military for so long I enjoy using military time or 24 hour time verses 12 hour time.  This way it would all be seeking info from the users profile and displaying as they had chosen.

Thanks

William

Quote from: Joker™ on December 23, 2012, 10:15:39 AM
FYI... mod (https://github.com/Joker-SMF/SMF-LiveClockInHeader) in progress ;).

Converting this into a mod. You'll get a lot of options in it ;).

Greetings Joker,

How is this mod coming along?  Hope all is going well...

William
Title: Re: Live clock in header
Post by: Joker™ on February 04, 2013, 01:24:06 PM
Quote from: revwill on January 31, 2013, 11:42:45 PM
Greetings Joker,

How is this mod coming along?  Hope all is going well...

William
Been busy with my brothers marriage. Most of my work has been on hold due to that only.

I'll try to find some time and see what I can do.
Title: Re: Live clock in header
Post by: Shapewear on February 05, 2013, 05:23:57 AM
This depends on your template however this is possible - by assigning the module the special position or by changing the CSS style.
Title: Re: Live clock in header
Post by: revwill on February 06, 2013, 01:47:43 PM
Quote from: Joker™ on February 04, 2013, 01:24:06 PM
Quote from: revwill on January 31, 2013, 11:42:45 PM
Greetings Joker,

How is this mod coming along?  Hope all is going well...

William
Been busy with my brothers marriage. Most of my work has been on hold due to that only.

I'll try to find some time and see what I can do.

Thanks and I hope all goes well with the wedding-tell him Congrats and we hope for a lifetime of happiness!
Title: Re: Live clock in header
Post by: Joker™ on February 11, 2013, 07:32:56 AM
Quote from: revwill on February 06, 2013, 01:47:43 PM
Thanks and I hope all goes well with the wedding-tell him Congrats and we hope for a lifetime of happiness!
Thanks for the wishes.

A nice progress has been made in terms of functionality of the mod. You can check the progress over Github (https://github.com/Joker-SMF/SMF-LiveClockInHeader)
Title: Re: Live clock in header
Post by: Joker™ on February 14, 2013, 12:21:53 PM
Mod submitted (http://custom.simplemachines.org/mods/index.php?mod=3641), under review. It'll be public once it is approved.
Title: Re: Live clock in header
Post by: NanoSector on February 14, 2013, 02:54:23 PM
PM sent, please fix the issues reported :)

I don't think it'll take long before this is approved, honestly.
Title: Re: Live clock in header
Post by: TheListener on February 14, 2013, 08:40:40 PM
Quote from: Yoshi2889 on February 14, 2013, 02:54:23 PM
PM sent, please fix the issues reported :)

I don't think it'll take long before this is approved, honestly.

As long as Yoshi doesn't break it too much.

:P
Title: Re: Live clock in header
Post by: NanoSector on February 15, 2013, 03:19:06 PM
Quote from: Old Fossil on February 14, 2013, 08:40:40 PM
Quote from: Yoshi2889 on February 14, 2013, 02:54:23 PM
PM sent, please fix the issues reported :)

I don't think it'll take long before this is approved, honestly.

As long as Yoshi doesn't break it too much.

:P
I don't break stuff.







Y'know ::)
Title: Re: Live clock in header
Post by: TheListener on February 15, 2013, 03:28:15 PM
Quote from: Yoshi2889 on February 15, 2013, 03:19:06 PM
Quote from: Old Fossil on February 14, 2013, 08:40:40 PM
Quote from: Yoshi2889 on February 14, 2013, 02:54:23 PM
PM sent, please fix the issues reported :)

I don't think it'll take long before this is approved, honestly.

As long as Yoshi doesn't break it too much.

:P
I don't break stuff.



Y'know ::)

Er ya a customiser it's your job too break things :P
Title: Re: Live clock in header
Post by: NanoSector on February 15, 2013, 03:43:15 PM
Quote from: Old Fossil on February 15, 2013, 03:28:15 PM
Quote from: Yoshi2889 on February 15, 2013, 03:19:06 PM
Quote from: Old Fossil on February 14, 2013, 08:40:40 PM
Quote from: Yoshi2889 on February 14, 2013, 02:54:23 PM
PM sent, please fix the issues reported :)

I don't think it'll take long before this is approved, honestly.

As long as Yoshi doesn't break it too much.

:P
I don't break stuff.



Y'know ::)

Er ya a customiser it's your job too break things :P
Naw...it's not :P

I have to tear stuff apart and attempt to get it back together... Usually it's the latter which crashes ::)
Title: Re: Live clock in header
Post by: typan4 on February 15, 2013, 04:06:02 PM
Has this gone public yet?
Title: Re: Live clock in header
Post by: TheListener on February 15, 2013, 04:07:50 PM
Quote from: Joker™ on February 14, 2013, 12:21:53 PM
Mod submitted (http://custom.simplemachines.org/mods/index.php?mod=3641), under review. It'll be public once it is approved.

Here is your answer.
Title: Re: Live clock in header
Post by: typan4 on February 15, 2013, 05:47:05 PM
Looks like a no then  ;)
Title: Re: Live clock in header
Post by: TheListener on February 15, 2013, 05:48:42 PM
Quote from: typan4 on February 15, 2013, 05:47:05 PM
Looks like a no then  ;)

Be patient or add the clock manually.

It isn't that hard.
Title: Re: Live clock in header
Post by: Joker™ on February 16, 2013, 01:31:38 AM
Hey oldy :P, when did you turned grey :laugh:?
Title: Re: Live clock in header
Post by: jackregan on April 24, 2013, 10:05:36 AM
Much as I admire the ingenuity, I took the clock off my SMF site years ago. Everyone who wants a clock now has one at the top of their screen (or the bottom for non-Mac peeps) so I don't see a lot of use for them on sites really.
Title: Re: Live clock in header
Post by: TheListener on April 24, 2013, 11:50:57 AM
Quote from: Joker™ on February 16, 2013, 01:31:38 AM
Hey oldy :P, when did you turned grey :laugh:?

Was a while back Joker.

But as ya probably saw I'm green again.

@Jackregan

You know there's a mod for this now?

Why bother hijacking the thread if you don't see the point in a live clock?

::)
Title: Re: Live clock in header
Post by: jackregan on April 25, 2013, 01:50:41 PM
Quote from: Old Fossil on April 24, 2013, 11:50:57 AM
Why bother hijacking the thread if you don't see the point in a live clock?

::)

I thought it was a useful contribution. Apologies if not :)
Title: Re: Live clock in header
Post by: KittyGalore on January 11, 2020, 06:02:16 PM
When this mod is installed the live from SMF in the admin center and current version is blank. Maybe this mod needs to be updated it works fine other than that.