Realtime digital clock in Navbar

Admin · Nov 2, 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([COLOR="Red"]"januari","februari","maart","april","mei","juni","juli","augustus","september","oktober","november","december[/COLOR]")
document.write(" "[COLOR="Blue"]+daym+" "+ShowMonthArray[month]+"  "+year+" "[/COLOR]);
//-->
      </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>

Realtime digital clock in Navbar

Admin

Well-Known Member

Facebook Comments

Similar threads

New posts New threads New resources

New posts

New threads

new_resources