Create a Floating Countdown!

View previous topic View next topic Go down

avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 23/11/2011, 7:20 pm


Hello users!

Today I am going to be showing you how to make your own floating countdown clock on your forum for any occasion. Below is a step by step guide. This will work in PunBB and PHPBB2

Step One:

In your CSS add the following:


Code:
#customcountdown {
    float: right;
    margin-right: 150px;
    height: 40px;
    width: 300px;
    font-family: "georgia", times new roman, times, serif;
    color: #fff;
    font-size: 11px;
    text-align: center;
    margin-top: -50px;
    background: url(http://i43.servimg.com/u/f43/16/73/82/07/server10.png) no-repeat;
    padding-top: 5px;
 letter-spacing:1px}

Step Two:

Go to: Modules -> Javascript Codes Management -> Create New

Add the following:

Code:
// Andrew Urquhart : CountDown Timer : http://andrewu.co.uk/clj/countdown/
function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("if(typeof CD_T=='function'){CD_T('"+id+"',"+e+")}",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);if(CD_OBJS[id]){CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"}};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"http://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init};

Save it, and copy the link.

Step Three:

PunBB Version:
Go to OVERALL_HEADER and find:

Code:
  <a id="top" name="top" accesskey="t"></a>

Right below it, add:

Code:
<div id="customcountdown"><script type="text/javascript" src="LINK FROM THE JAVASCRIPT" defer="defer"></script><strong>Your Text Here: </strong><br><span id="countdown1">YYYY-MM-DD HH:MM:SS GMT+00:00</span></div>

REPLACE LINK FROM THE JAVASCRIPT WITH THE LINK YOU COPIED EARLIER. Change the date to countdown to:

YYYY = Year
MM = Month
DD = Day
HH = Hour
MM = Minute
SS = Second


save and publish your template. Your countdown will be on every page at the TOP RIGHT.

PHPBB2 version:

Find:

Code:
<a name="top"></a>


Right below it, add:

Code:
<div id="customcountdown"><script type="text/javascript" src="LINK FROM THE JAVASCRIPT" defer="defer"></script><strong>Your Text Here: </strong><br><span id="countdown1">YYYY-MM-DD HH:MM:SS GMT+00:00</span></div>

REPLACE LINK FROM THE JAVASCRIPT WITH THE LINK YOU COPIED EARLIER. Change the date to countdown to:

YYYY = Year
MM = Month
DD = Day
HH = Hour
MM = Minute
SS = Second


save and publish your template. Your countdown will be on every page at the TOP RIGHT.



Any problems -> Please PM me!


Last edited by drogba921 on 7/1/2012, 7:32 pm; edited 1 time in total
avatar
tommycoo
Member
Member
Forum Posts : 11
Member Since : 2011-12-15
View user profile

Posttommycoo on 17/12/2011, 4:50 pm

how u can make it always stay in the top ..if we scroll the page
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 17/12/2011, 5:49 pm

add:

Code:
position: fixed;

to the css
avatar
tommycoo
Member
Member
Forum Posts : 11
Member Since : 2011-12-15
View user profile

Posttommycoo on 17/12/2011, 5:54 pm

not working
avatar
Thomas
Beta Tester
Beta Tester
Forum Posts : 14
Member Since : 2011-11-05
View user profile

PostThomas on 18/12/2011, 8:19 pm

It hides behind the logo how can I move it to be in front.
avatar
Coddy
Member
Member
Forum Posts : 45
Member Since : 2011-11-21
View user profile

PostCoddy on 19/12/2011, 10:41 am

tommycoo:
Code:
position: fixed !important;

Raze:
Code:
z-index: 999 !important;
avatar
Thomas
Beta Tester
Beta Tester
Forum Posts : 14
Member Since : 2011-11-05
View user profile

PostThomas on 19/12/2011, 9:07 pm

It worked thanks.
avatar
Coddy
Member
Member
Forum Posts : 45
Member Since : 2011-11-21
View user profile

PostCoddy on 20/12/2011, 8:38 am

Glad I could help. Razz
avatar
Legendrock7
Member
Member
Forum Posts : 15
Member Since : 2011-12-31
View user profile http://www.reality-pkz.com

PostLegendrock7 on 31/12/2011, 12:55 am

i got stuck on the overall_head thingy, I can't find the code "" on my template

Do i go to acp>display>general>overall_header>and find the code?because i cannot find it.
avatar
Vanilla990
Administrator
Forum Posts : 114
Member Since : 2011-10-30
View user profile

PostVanilla990 on 31/12/2011, 3:00 am

You will need to be on the original administration account and then go to:

"ACP > Display > Templates > Overall_Header"

from there you should be able to do a "Ctrl + F" and then find and replace the code you need to change/add.
avatar
BlackNite
Premium Member
Premium Member
Forum Posts : 55
Member Since : 2011-11-28
View user profile http://gfxtutorials.netboarder.com/

PostBlackNite on 31/12/2011, 3:59 am

Your Text Here:
YYYY-MM-DD HH:MM:SS GMT+00:00



in this code said"LINK FROM THE JAVASCRIPT" where can i find that LINK??
avatar
Legendrock7
Member
Member
Forum Posts : 15
Member Since : 2011-12-31
View user profile http://www.reality-pkz.com

PostLegendrock7 on 31/12/2011, 12:16 pm

Vanilla990 wrote:You will need to be on the original administration account and then go to:

"ACP > Display > Templates > Overall_Header"

from there you should be able to do a "Ctrl + F" and then find and replace the code you need to change/add.
i am the original owner and still can't find.

Perhaps maybe some one could help me over teamviewer?

Or i can post the overhead code (whole entire code) and you code it in?
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 31/12/2011, 1:56 pm

I could help on teamviewer.
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 31/12/2011, 1:56 pm

BlackNite wrote: <div id="customcountdown"><script type="text/javascript" src="LINK FROM THE JAVASCRIPT" defer="defer"></script><strong>Your Text Here: </strong><br><span id="countdown1">YYYY-MM-DD HH:MM:SS GMT+00:00</span></div>


in this code said"LINK FROM THE JAVASCRIPT" where can i find that LINK??

It'd be the file you added the JS to earlier in the tutorial... Modules -> JAvascript management
avatar
Legendrock7
Member
Member
Forum Posts : 15
Member Since : 2011-12-31
View user profile http://www.reality-pkz.com

PostLegendrock7 on 31/12/2011, 3:56 pm

drogba921 wrote:I could help on teamviewer.

soz for a long,late reply. Can you go on right now?
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 31/12/2011, 5:11 pm

whenever.
avatar
Legendrock7
Member
Member
Forum Posts : 15
Member Since : 2011-12-31
View user profile http://www.reality-pkz.com

PostLegendrock7 on 31/12/2011, 6:20 pm

ok if you're on, pm me and i'll pm u the user n pass
avatar
Kaynil
Member
Member
Forum Posts : 14
Member Since : 2011-12-31
View user profile http://roczuz.com/-c2

PostKaynil on 1/1/2012, 12:40 am

One question... I noticed in the forum the clock gives the time according to the visitor.

I like the idea of the clock but in order to have an 'official' time in the boards, since we're from different Time Zones, is there a way to have it display a Fixed time zone that a everyone would see in the forums, regardless the one they are using in the forum r set in their computers?
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 1/1/2012, 7:49 am

This thread isn't about the clock, but I guess as its so popular I should post it.
avatar
Kaynil
Member
Member
Forum Posts : 14
Member Since : 2011-12-31
View user profile http://roczuz.com/-c2

PostKaynil on 1/1/2012, 3:46 pm

Oh, my bad. I don't know why got the idea it was. I can see what it is now.
It is still a very handy code, specially for inner contests.

Sorry about the off topic. Please feel free to separate/delete/etc the wrong post. XD
avatar
ProphecyCSS
Member
Member
Forum Posts : 3
Member Since : 2012-01-19
View user profile

PostProphecyCSS on 19/1/2012, 11:18 pm

Alright but not to intrude on this good tutorial of a floating countdown a good idea, but for the people who dont know how to use a css sheet and javascript i got the best way it only requires html and its a site "not mine",
1. go here myflashfetish.com/
2. go to widgets
3. pick countdown
4. put in the date you want countdown to end
5. generate countdown html
6. press copy
7. u can go to acp > display > generalites and paste or u can go to acp > modules > forum widgets > create new > paste then drag to forum.
That goes with all the widgets there, i liked the text scroller many of yall would like it.
Thanks i hoped i helped the misunfortunate who cant code alot
avatar
bodyarmormanufacturers
Member
Member
Forum Posts : 1
Member Since : 2012-03-07
View user profile

Postbodyarmormanufacturers on 7/3/2012, 8:20 am

Wow.. it really works and its Looks beautiful..
Thanks! keep it Up!
Very Happy LINK REMOVED
avatar
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
View user profile http://www.codinghelp.org

PostMike on 7/3/2012, 2:42 pm

Bodyarmormanufacturers - Please do not advertise. I've given you a serious warning since this is your first post.
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum