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)

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:

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

Quote:

Originally Posted by Stefan118 (Post 2385442)

Code:

<font color="#000000" size="3" face="Verdana">

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 (7)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete 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.01105 seconds Memory Usage 1,809KB 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 (7)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: