vb.org Archive - Forum Display Enhancements - Realtime digital clock in Navbar

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Display Enhancements - Realtime digital clock in Navbar (https://vborg.vbsupport.ru/showthread.php?t=289037)

Realtime digital clock in Navbar

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>

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

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

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

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

Quote:

Originally Posted by Fongool (Post 2377408)

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

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 to line the time up with the date.

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

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

Thank you
F

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

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

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.

Quote:

Originally Posted by Bob_R (Post 2385438)

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:

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.

Quote:

Originally Posted by Stefan118 (Post 2385442)

Code:

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

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.

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?

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

Quote:

Originally Posted by Amaury25 (Post 2401757)

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.

Quote:

Originally Posted by ramesh_umk3 (Post 2401807)

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?

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
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (12)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01670 seconds Memory Usage 1,844KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (12)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (20)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: