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 · #2 10-13-2012, 08:34 PM

Reserved

Toorak Times · #3 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 · #4 10-14-2012, 09:59 AM

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

Fongool · #5 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 · #6 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 · #7 11-01-2012, 10:53 PM

Quote:

Originally Posted by Fongool

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:

Code:

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

Code:

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 · #8 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 · #9 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 · #10 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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04835 seconds Memory Usage 2,329KB Queries Executed 25 (?)
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 (5)bbcode_code (1)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 (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (9)postbit (2)postbit_attachment (10)postbit_onlinestatus (10)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_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 post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername 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 pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

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