Logged Out
Create an Account
Login:
Password:

Forgot your password?
countdown question

countdown question
[Back to Index]  [Bottom of Thread]
Thread Tags
Primary: [Advanced Layout]
Secondary: None
1 2 3 >>>
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

--
designer of http://aszune.dkpsystem.com
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.
Ok, I love a good challenge.

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;}

.timestyel {font-size: 20px; color: #00FF00; font-family: arial, helvetica, san-serif;}
.timerlink {font-size: 20px; color: #00FF00; font-family: arial, helvetica, san-serif;}
</style>

<script type="text/javascript" language="javascript">

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.
Wow, I hope a lot get a lot of use out of this nice little script from you Krik

--
It's all in the reflexes.
thanks m8 i tweaked it a little bit but its awesome thanks

--
designer of http://aszune.dkpsystem.com
No problem, glad you like it.

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.
var timed = "<span class='timestyel'>" + hour + ":" + minute + ":" + sec + " " + eighthword[7] + "<br>" +
linkall + lastwords + "</span>"; //writes the new countdown timer


here i changed it to

var timed = "<span class='timestyel'>" + hour + " " + "hours" + " " + minute + " " + "minutes" + " " + sec + " " + "seconds" + " " + eighthword[7] + " " +
linkall + lastwords + "</span>";


which makes it look a lot nicer and it is indeed easy to customize

it's running on the test site btw

--
designer of http://aszune.dkpsystem.com
Howdy.

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

--

Quote by Dregean
Howdy.

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.

--
Ieyasu - Organizer, Ex Cineribus
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
Quote by Anthrax
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.

--
Ieyasu - Organizer, Ex Cineribus
So I did, put in the head tag and still have some result. No countdown and lose the ability to change thread tags.

Anthrax
I uploaded a modified version of your layout to my *previous post. This is what is currently being used at http://demo.dkpsystem.com/news.php

--
Ieyasu - Organizer, Ex Cineribus
Quote by Nitesbane
Quote by Dregean
Howdy.

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?

--

Quote by Dregean
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.

--
Ieyasu - Organizer, Ex Cineribus
Quote by Dregean
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 BagRefresh This Item
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!
Quote by Saudorun
Quote by Dregean
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 ageDesc-->

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?

--

Quote by Dregean
Quote by Saudorun
Quote by Dregean
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 BagRefresh This Item
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)

Check it out:

http://ie.dkpsystem.com
noble i noticed some mistake while looking in ur code:

<script language="javascript" src="settings/ie/files/IEScript.js"
</head><script language=javascript>

i guess the </head> needs to be out of the script?

--
designer of http://aszune.dkpsystem.com


1 2 3 >>>
[Back to Index]  [Top of Thread]