The Arcive of Official vBulletin Modifications Site.

Realtime digital clock in Navbar · **Released**: 10-12-2012

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

Code:

{vb:raw template_hook.navtab_end}

and place the clock code below it.

Installation: vB 4.2.0
Open the navbar template.
Find

Code:

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

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">
<!--
/*
Show current date
*/

var mydate=new Date()
var year=mydate.getYear()
if (year<2000) year += (year < 1900) ? 1900 : 0
var daym=mydate.getDate()
var month=mydate.getMonth()
if (daym<10) daym="0"+daym
var ShowMonthArray=new 
Array("januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december")
document.write(" "+daym+" "+ShowMonthArray[month]+"  "+year+" ");
//-->
      </SCRIPT>
    </td>
    </td>
    <td> 
    <p align="right">&nbsp;
    <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();if (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>&nbsp;

// End of clock script    

</table>

</body>

</li>

Stefan118 · #12 11-14-2012, 02:05 PM

Code:

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:

Code:

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 · #13 11-26-2012, 11:38 PM

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

Code:

<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">
<!--
/*
Show current date
*/

var mydate=new Date()
var year=mydate.getYear()
if (year<2000) year += (year < 1900) ? 1900 : 0
var daym=mydate.getDate()
var month=mydate.getMonth()
if (daym<10) daym="0"+daym
var ShowMonthArray=new 
Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(" "+ShowMonthArray[month]+" "+daym+"  "+year+" ");
//-->
      </SCRIPT>
    </td>
    </td>
    <td> 
    <p align="right">&nbsp;
    <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();if (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>&nbsp;



// 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><!-- closing div for above_body -->
<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> <!-- crumb -->
 <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> <!-- newcrumb -->

{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 · #14 11-26-2012, 11:54 PM

Quote:

Originally Posted by Bob_R

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:

Code:

<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 · #15 11-27-2012, 12:42 AM

Quote:

Originally Posted by Stefan118

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:

Code:

<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 · #16 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 · #17 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 · #18 02-04-2013, 01:59 PM

try below code if your interested

Code:

<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

Stefan118 · #19 02-04-2013, 08:32 PM

Quote:

Originally Posted by Amaury25

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 · #20 01-14-2018, 08:35 AM

Quote:

Originally Posted by ramesh_umk3

try below code if your interested

Code:

<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

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 · #21 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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.11998 seconds Memory Usage 2,374KB Queries Executed 29 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (10)bbcode_code (4)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (11)post_thanks_box (1)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (2)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

Благодарность от:
fxdigi-cash

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!