Forum Display Enhancements - Realtime digital clock in Navbar [Archive]

Stefan118

10-12-2012, 10:00 PM

Get rid of the empty space after your tabs in the navbar.
Becouse there are only a few buttons on the navbar and a searchbox, i thought is would be a nice idea to put there a realtime clock, so i tweaked a few googled codes, and build my own.

Live demo at:
http://www.papegaaienforum.nl

Installation: vB 4.X.X
Open the navbar template
Find {vb:raw template_hook.navtab_end}
and place the clock code below it.

Installation: vB 4.2.0
Open the navbar template.
Find {vb:raw navigation}
and place the clock code below it.

In RED color: The name of the months, you can translate them yourself.
In BLUE color: The layout of your date. DD-Month-YYYY. Switch the variables to get an other format.

Clock code:
<li>

<BODY onLoad="KW_doClock()">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td>
<p align="right">
<font color="#000000" size="3" face="Verdana">
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>
</td>
</td>
<td>
<p align="right"> 
<font color="#000000" size="3" face="Verdana">

<script language='JavaScript'>
// JavaScript Magic Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { //
this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this. z=z
this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=0
}
var clock=new class_clock("Verdana, Arial, Helvetica, sans-serif","11 px","#000000","#000000","50",0,1,0,0,0)
// 0,1,0,0,0,0 = AM/PM or nothing, leading zero for seconds, leading zero for hours (has to be 0 for 24H), adjust hours, adjust hours.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; "></span>'); }
else if (d.layers) {d.write('<ilayer id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { //
d=document;t=new Date();p="";dClock=""; if (d.layers) d.wrapClock.visibility="show";
tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes ())
h=t.getHours();m=t.getMinutes();s=t.getSeconds();i f (clock.h)
{p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
{m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
lc.document.write(dClock);lc.document.close();
} else if (d.all) { activeClock.innerHTML = dClock;
} else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
if (!a) setTimeout("KW_doClock()",1000);
}

</script> 

// End of clock script

</table>

</body>

</li>

Stefan118

10-13-2012, 08:34 PM

Reserved

Toorak Times

10-14-2012, 01:02 AM

Hi mate,

I have been looking for something like this. Does it have to reside in the Navbar? My newspaper would be served better if I can apply it to the Notifications bar.
Cheers, great work

Stefan118

10-14-2012, 09:59 AM

I suppose you can place it everywhere you want.
But i have'nt been testing that.

Fongool

10-31-2012, 09:30 PM

Love the clock...Installed it and used my own colors...Looks great...Is there a way to use a 12 hour format instead of 24 hour format?

And just one more thing....I am attaching a screenshot of the navbar...is there any way to lower the clock to be even with the rest of the menu's?

Thanks for this
F

Fongool

11-01-2012, 12:42 AM

Solved the time change...from 24 hours to 12 hours,,,Now, just to get it even with the rest of the nav menus,,
If you can help with that, that would be great!

F

Stefan118

11-01-2012, 10:53 PM

Solved the time change...from 24 hours to 12 hours,,,Now, just to get it even with the rest of the nav menus,,
If you can help with that, that would be great!

F

You might want to try to put 2 <br> tags in the script.
The first 1 shoult be placed directly under:
<BODY onLoad="KW_doClock()">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td>
So after this <td> you can put a <br>.

The second should be placed directly under:
Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december")
document.write(" "+daym+" "+ShowMonthArray[month]+" "+year+" ");
//-->
</script>
</td>
</td>
<td>
Again: after this <td> you can put a <br> to line the time up with the date.

Fongool

11-14-2012, 02:52 AM

ok...The clock is working fine...I think I know why it won't go lower...But how do I get a "0" in front of the numbers?...09:05:01 looks like this 9:5:1 for the time...I want to put the "0" in front so it will look like this "09:05:01"....Any idea's?

Thanks in advance
F

Fongool

11-14-2012, 03:01 AM

Thanks for that other post...Worked perfectly!...
Clock is even with the rest of the navbar...

Thank you
F

Fongool

11-14-2012, 03:06 AM

Looks like the clock is putting the "0"in front...I added "11, 11, 11, 11" instead of "0, 0, 0, 0" Hope it's not just doing it now because it's 11:05:34...

F

Stefan118

11-14-2012, 02:05 PM

var clock=new class_clock("Verdana, Arial, Helvetica, sans-serif","11 px","#000000","#000000","50",0,1,0,0,0)
// 0,1,0,0,0 = AM/PM or nothing, leading zero for seconds, leading zero for hours (has to be 0 for 24H), adjust hours

In the mod there is a small error. As explanation i had a 0 too much.

You should only use 0 or 1. Not 11.
first one = 0 for noting, change it to 1 for showing AM/PM
second = leading zero for seconds, if set to 0, no leading zero will be shownd from 0 to 9 seconds.
third = leading zero for hours. This should ALWAYS be set to 0......
fourth and fifth = adjusting the hours + or -

So if you want it to show 6:03:09 AM it should be set to:
var clock=new class_clock("Verdana, Arial, Helvetica, sans-serif","11 px","#000000","#000000","50",1,1,0,0,0)

To check if it works, set your computer clock to an other time... This script uses your computer clock :)

Bob_R

11-26-2012, 11:38 PM

Here's my/the code. Your code is in red

<div id="navbar" class="navbar">
<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">
{vb:raw template_hook.navtab_start}
{vb:raw navigation}

<li>

<BODY onLoad="KW_doClock()">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td>
<p align="right">
<font color="#000000" size="3" face="Verdana">
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>
</td>
</td>
<td>
<p align="right"> 
<font color="#000000" size="3" face="Verdana">

<script language='JavaScript'>
// JavaScript Magic Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { //
this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this. z=z
this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=0
}
var clock=new class_clock("Verdana, Arial, Helvetica, sans-serif","11 px","#000000","#000000","50",0,1,0,0,0)
// 0,1,0,0,0,0 = AM/PM or nothing, leading zero for seconds, leading zero for hours (has to be 0 for 24H), adjust hours, adjust hours.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; "></span>'); }
else if (d.layers) {d.write('<ilayer id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { //
d=document;t=new Date();p="";dClock=""; if (d.layers) d.wrapClock.visibility="show";
tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes ())
h=t.getHours();m=t.getMinutes();s=t.getSeconds();i f (clock.h)
{p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
{m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
lc.document.write(dClock);lc.document.close();
} else if (d.all) { activeClock.innerHTML = dClock;
} else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
if (!a) setTimeout("KW_doClock()",1000);
}

</script> 

// End of clock script

</table>

</body>

</li>

{vb:raw template_hook.navtab_end}
</ul>

<vb:if condition="$vboptions['enablesearches']">
<div id="globalsearch" class="globalsearch">
<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="process" />
<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
</form>
<ul class="navbar_advanced_search">
<li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
{vb:raw template_hook.navbar_advanced_search}
</ul>
</div>
</vb:if>
</div>
</div>
<div id="bodytop"><div id="bodybottom"><div id="bodyleft"><div id="bodyright"><div id="topright"><div id="topleft"><div id="bottomright"><div id="bottomleft">
<div class="body_wrapper">

<div id="newcrumb">
<div id="crumbL">
<div id="breadcrumb" class="breadcrumb">
<ul class="floatcontainer">
<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
{vb:raw navbits.breadcrumb}
{vb:raw navbits.lastelement}
</ul>
<hr />
</div>
</div> 
<div id="crumbR">
<ul>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_rss'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_rss}"><img src="{vb:stylevar imgdir_misc}/icon-rss.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_twitter'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_twitter}"><img src="{vb:stylevar imgdir_misc}/icon-twitter.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_facebook'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_facebook}"><img src="{vb:stylevar imgdir_misc}/icon-facebook.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_linkedin'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_linkedin}"><img src="{vb:stylevar imgdir_misc}/icon-linkedin.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_myspace'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_myspace}"><img src="{vb:stylevar imgdir_misc}/icon-myspace.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_blogger'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_blogger}"><img src="{vb:stylevar imgdir_misc}/icon-blogger.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_youtube'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_youtube}"><img src="{vb:stylevar imgdir_misc}/icon-youtube.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_flickr'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_flickr}"><img src="{vb:stylevar imgdir_misc}/icon-flickr.png" /></a></li></vb:if>
<vb:if condition="!empty($vbulletin->options['ws_bluepearl_sp_google'])"><li><a href="{vb:raw vboptions.ws_bluepearl_sp_google}"><img src="{vb:stylevar imgdir_misc}/icon-google.png" /></a></li></vb:if>
</ul>
</div>
<br clear="all" />
</div> 

{vb:raw ad_location.ad_navbar_below}
{vb:raw ad_location.global_below_navbar}

<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'">
<form action="profile.php?do=dismissnotice" method="post" id="notices" class="notices">
<input type="hidden" name="do" value="dismissnotice" />
<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
<input type="hidden" name="url" value="{vb:raw return_link}" />
<ol>
{vb:raw notices}
</ol>
</form>
</vb:if>

And I've attached a screen shot.

What I am missing?

Thank you.

Stefan118

11-26-2012, 11:54 PM

What I am missing?

Thank you.

Somehow it places a comment text behind the time...
That's easy to remove.
At the end of the script you see: // End of clock script
Just remove that and that part is solved. (The part why it places the comment text is not solved! Things after the double slash should not be shown in html)

Second: you can change the color to white like the rest of your navbar text.
Find:
<font color="#000000" size="3" face="Verdana">
replace #000000 for the color code you want.
Note: you have to change the date as well as the clock.

Third: to align the time and date with the rest of the text in the navbar, you can find that solution in post 7.
This is depending of the style you use, and not an error in the script.

Bob_R

11-27-2012, 12:42 AM

Somehow it places a comment text behind the time...
That's easy to remove.
At the end of the script you see: // End of clock script
Just remove that and that part is solved. (The part why it places the comment text is not solved! Things after the double slash should not be shown in html)

Second: you can change the color to white like the rest of your navbar text.
Find:
<font color="#000000" size="3" face="Verdana">
replace #000000 for the color code you want.
Note: you have to change the date as well as the clock.

Third: to align the time and date with the rest of the text in the navbar, you can find that solution in post 7.
This is depending of the style you use, and not an error in the script.

But what about the time and date being in between the Arcade and Media link? (see screen shot in post #12)

Stefan118

11-27-2012, 12:52 AM

I suppose the "media" link is an other mod?
The "media" link is not in your navbar template.

If you can find where the link is placed in the templates, you could try to put the clock script behind that.
I can't help you with that, i don't know what mod it is and how it works.

Amaury

02-04-2013, 07:58 AM

Okay, so if I wanted this format: n/j/Y, g:i A (2/4/2013, 12:58 AM)

...what would I do to the code?

ramesh_umk3

02-04-2013, 01:59 PM

try below code if your interested

<body onLoad="goforit()">
<script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year<1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='FFFFFF' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>

<div align="right"><span id="clock"></span></div>

LIVE DEMO (See Top Right Corner) : HERE (http://www.megawrz.com)

Stefan118

02-04-2013, 08:32 PM

Okay, so if I wanted this format: n/j/Y, g:i A (2/4/2013, 12:58 AM)

...what would I do to the code?

I think the best way is to use the other script.
My script needs to be completely turned around if you want to use it.

IggyP

01-14-2018, 08:35 AM

try below code if your interested

<body onLoad="goforit()">
<script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year<1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='FFFFFF' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>

<div align="right"><span id="clock"></span></div>

LIVE DEMO (See Top Right Corner) : HERE (http://www.megawrz.com)

i was enjoying trying this code out, i put it into a fixed floating toplinks bar i made....but then i noticed it only loads up for the main forum page? if viewing a topic no clock but all the other elements in the bar load....dont understand why it would not load regardless.....any ideas?

GhostHunter2010

04-20-2020, 12:56 PM

thx for sharing but to be honest to many changes for a digiclock ... me personaly i peref the one on footer no codes nothing to change :)