would it be possible in anyway to put the countdown in a javascript in some way so it would keep counting down and not only change when u load the page?? i'm not really good at javascript but when i get some cheap example i can search my way into it
It would be fairly simple using regex (regular expressions) to pull the 3 numbers out and then using the time and math functions of javascript start a timer based on those numbers. Of course this is rough but it would be fairly accurate.
If you need code for setting up a timer look at hotscripts.com there is several free scripts there as well as tutorials. Also W3C has a list of all javascript functions and it will include all the date and time functions as well as basic examples.
Also, my suggestion to go to hotscripts.com to get the code, ignore that. All the code I saw was for making a count down timer to some odd ball date in the future (ie. xxx days till christmas). Who cares how many days till christmas. Not to mention when they use 200+ lines of code to get it to work I think, ouch, yea lets just go ahead and make my site run slower, not.
And beyond that regex goes over most casual programmers heads, so.
I built the timer and here it is for all of you to enjoy (comments included for ease of editing):
Place following in the head of the layout.htm page <head> <style type="text/css"> .hideit {display: none;}
document.write("<div id='raidingtimer' class='hideit'><!--System:CountDown --></div>"); //give the countdown an Id for geting the child <A> tag
var maincontent = document.getElementById("raidingtimer"); //Get the parten Id for "thehref"
var innercontent = maincontent.innerHTML; //Get the actuall count down timer
var thehref = maincontent.getElementsByTagName('a'); //Get the href value for recreating the link
var linkstext = thehref[0].innerHTML; //getts the linked text
var linkall = "<a class='timerlink' href='" + thehref[0] + "'>" + linkstext + "</a>"; //Rebuild the link with a class for changing the style of the link
var contentnum = innercontent.match(/(\d+)/g); //Gets all the digits from the countdown and puts them into an array
var eighthword = innercontent.split(" "); //splits each word in the countdown into an array
var hour = contentnum[0]; //gets the first digit in the "contentnum" array and sets it to hour var minute = contentnum[1]; //gets the second digit in the "contentnum" array and sets it to minute var sec = contentnum[2]; //gets the third digit in the "contentnum" array and sets it to sec
function countdown(){ //the new dynamic countdown function
if (eighthword[7] == "until"){ //finds out if it the counter is going up or down sec--; //reduce the seconds by 1 var lastwords = ""; //set if a word is needed after the raid title
if (sec < "0"){ //the if will reduce the "minute" by 1 if sec reaches less than 0 sec = 59; //resets sec to 59 to continue the countdown minute--; //reduces minute by 1 } if (minute < "0"){ //the if will reduce the "hour" by 1 if minute reaches less than 0 minute = 59; //resets minute to 59 to continue the countdown hour--; //reduces hour by 1 } if (hour == "0" && minute == "0" && sec == "0") { document.location.reload() //if the timer reaches all 0's beacuse some left the page up } //this will reload the page to get the new timer values }
if (eighthword[7] == "since") { //finds out if it the counter is going up or down sec++; //ups the seconds by 1 var lastwords = " started"; //set if a word is needed after the raid title
if (sec == "60"){ //the if will add 1 to the "minute" if sec reaches 60 sec = 0; //resets sec to 0 to continue the countdown minute++; //adds 1 to the minute } if (minute == "60"){ //the if will add 1 to the "hour" if minute reaches 60 minute = 0; //resets minute to 0 to continue the countdown hour++; //adds 1 to the hour if (hour >= "2"){ document.location.reload() //as I was unsure when the timer switches to counting down to an event } // I set this to relaod the page every hour after the first 2 have ellapsed } } var timed = "<span class='timestyel'>" + hour + ":" + minute + ":" + sec + " " + eighthword[7] + "<br>" + linkall + lastwords + "</span>"; //writes the new countdown timer document.getElementById('rtcontent').innerHTML = timed; //places the new countdown timer into the "body" of the page
t=setTimeout("countdown()", 1000); //the heart of the countdown timer. } //if you build you own this is were you will want to start
</script> </head>
Copy and paste the above code out, it will be easier to read.
Change the "body tag to: <body onload="countdown()">
Place this where you are wanting to have your <!--System:CountDown --> appear: <div id="rtcontent" align="center">
</div>
Make sure you relpace the <!--System:CountDown --> with with the above 3 lines
Also the formating for the timer can be changed in the "timed" variable in the javascript. And as I added a class to the text and the link you can change the colors and fonts using CSS.
I hope everyone enjoys this.
Feel free to let me know if any of you have any problems.
I am also glad you found it easy to customize. My biggest thing with scripts is first when they are way to long for a simple task and two when the original coder makes them to hard to customize.
So if someone with zero coding experience wanted to implement this timer into the website for "Time left until Gruuls" or some-such how would i do it. When it says copy layout.htm does that mean just post it in a word doc and changed the file extension?
So if someone with zero coding experience wanted to implement this timer into the website for "Time left until Gruuls" or some-such how would i do it. When it says copy layout.htm does that mean just post it in a word doc and changed the file extension?
Thanks Dregean
You would need to head into Admin -> Advanced Layout Options and then click the link that says Generate Layout and Menu Files. Then right-click Current Layout File and choose "Save As..." That's how you get your layout.html file. Then you open it in a text editor (I use Notepad) and copy/paste the awesome script that Kriknosnah so thoughtfully provided for us.
I also tweaked mine just a bit, and expect to have it running on my site within a few minutes (have to look up the color codes of my links first so it matches!). Thanks Krik!
**EDIT**: I just noticed that when you're using a drop-in template like I am and you generate your layout files from the Advanced Layout Options, it gives you the layout for whatever you had before you put the template in. So Dregean, you'd have to go into Admin - Drop-In Templates, download your template, then extract the layout.html file from the .zip and edit it from there. Head to Advanced Layout Options when you're done to upload/test it after you're done editing.
Yeah, I went in and tried to this before as well. Had some issues with it. It removed my ability to change thread tags and would never tick down the countdown. Probably something I did incorrectly.
Yeah, I went in and tried to this before as well. Had some issues with it. It removed my ability to change thread tags and would never tick down the countdown. Probably something I did incorrectly.
Anthrax
Looks like you accidentally erased one of the <head> tags when you pasted it in.
So if someone with zero coding experience wanted to implement this timer into the website for "Time left until Gruuls" or some-such how would i do it. When it says copy layout.htm does that mean just post it in a word doc and changed the file extension?
Thanks Dregean
You would need to head into Admin -> Advanced Layout Options and then click the link that says Generate Layout and Menu Files. Then right-click Current Layout File and choose "Save As..." That's how you get your layout.html file. Then you open it in a text editor (I use Notepad) and copy/paste the awesome script that Kriknosnah so thoughtfully provided for us.
I also tweaked mine just a bit, and expect to have it running on my site within a few minutes (have to look up the color codes of my links first so it matches!). Thanks Krik!
**EDIT**: I just noticed that when you're using a drop-in template like I am and you generate your layout files from the Advanced Layout Options, it gives you the layout for whatever you had before you put the template in. So Dregean, you'd have to go into Admin - Drop-In Templates, download your template, then extract the layout.html file from the .zip and edit it from there. Head to Advanced Layout Options when you're done to upload/test it after you're done editing.
When inserting the countdown timer into the layout.html is there a certain place is should be pasted into?
When inserting the countdown timer into the layout.html is there a certain place is should be pasted into?
I'm sure there is, but I don't know where that would be for you. As Chops mentioned in this post, the countdown timer was left out of the template you're using.
I would suggest trying to insert the <!--System:CountDown --> command first and playing with the javascript addition after.
When inserting the countdown timer into the layout.html is there a certain place is should be pasted into?
I would put it right above this tag <!--System:PageDesc-->
This will make the countdown appear right above the Content Title for each page.
-- Six Demon Bag Jack Burton: Hey, what more can a guy ask for? Egg Shen: Oh, a six-demon bag! Jack Burton: Terrific, a six-demon bag. Sensational. What's in it, Egg? Egg Shen: Wind, fire, all that kind of thing!
When inserting the countdown timer into the layout.html is there a certain place is should be pasted into?
I would put it right above this tag <!--System:PageDesc-->
This will make the countdown appear right above the Content Title for each page.
But you also have the add the code for the countdown timer somewhere also right?
No. The stuff in this thread is a Custom job to change some aspects of the default counter. Just placing <!--System:Countdown-> on your page will show you the counter.
The custom code in this thread does 1 thing. It make the timer refresh itself. Without Java code like this you simply won't see the refresh in the timer unless you refresh the page or navigate to a new page.
-- Six Demon Bag Jack Burton: Hey, what more can a guy ask for? Egg Shen: Oh, a six-demon bag! Jack Burton: Terrific, a six-demon bag. Sensational. What's in it, Egg? Egg Shen: Wind, fire, all that kind of thing!
Speaking of a counter... check out my newest guild site. I wrote this with very little code, and I'll post the code soon for other's use. (My net connection where I am ATM is bad, and uploading a file will take a LONG time)
i tweaked it a little bit but its awesome 
ageDesc-->
