I have just gone out, but will take a good look at this when I come back.
I did see a post where some one did change the code where it was fully editable with custom classes for fonts, sizes, colours etc. Can this be done do you know?
The one I saw from a previous post, had same kind of style but didn’t stop at zero and started doing minus figures.
I did play with the one @Eldar posted and I changed the text at the end so when time ran out - it vanished, that’s perfect.
I’d like it to show a button on completion! That’s fully styled to match the site.
haha !..yeah ! been trying this…I am trying to adapt the file from @pruthe above, the one posted stops with all on 0, 0, 0, 0
I have this code from the original code on that link you sent:
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById(“demo”).innerHTML = “EXPIRED”;
}
}, 1000);
And on the code from W3 schools, if i delete the “EXPIRED” then when the clock goes to the end, it disappears, which is one option I like rather than showing 0 0 0 0 - but on the zip files posted above, i still get the clock countdown and then show -1.
I will keep on playing !!!
Got till tomorrow lunch time (UK time!) to get this sorted. Its good fun trying !!! and learning what they all do…but running out of time!!! with myself and the timer
Using W3 Schools Countdown
I can manage to make the countdown on W3 schools to be able to edit with custom class…and can fully make it at the end to either stop, or message whatever i want, or even go blank at the end - BUT can’t manage to change the lay out so the Days, Hours etc are all under the numbers.
Using the one from @pruthe
I can change colour, change text size, but I can’t make it do the message at the end, or even go blank. Also I can’t make the text so I can edit in custom class properly.
I am trying to edit this by doing a mix of the two, but from what I am seeing, they are written different, by some pointing to IDs and the other one now, I try to change it so they are the same and then get nothing.
All good fun…well it was for the 1st 4hrs !
I was hoping to add some nice style to the design too…but i’d need a month to do that !
I found the original post that I got countdown code from.
The way originally coded, counter will go negative when date/time reached. I added code to display zeros, removing the commented section code, and it seemed to work. Don’t know how to totally remove counter section when date/time reached.
Good luck in getting countdown working the way you want.
The one that @pruthe shared with you actually has everything you need. Trying to merge 2 different scripts made by different people isn’t the best thing to do. (The link I posted is helpful in showing you want is happening in the script).
Depending on what you were wanting to achieve I would add some code to the section that “does something when the time reachers 0”. If for example you wanted a button to show, I would clear the HTML and replace it with a button.
I would also change the CSS to avoid potential conflicts with the rest of the site by changing it to
I did some looking around and think I found a way to blank out countdown timer when the end date/time is reached. I made some minor mods to my previous posted code. New code link is below. I also included style changes suggested by @PeteSharp. I tried new code on my site and seems to work. If you want to add button code, just replace current “br” HTML code.
Just wanted to let you know I made one more minor mod to countdown code. Link is below. I noticed that the numbers are initially null and the Days, Hours, Mins, Secs field will jump when numbers are first displayed. I put ** in numbers fields between span tags. That seems to eliminate jump during initialization.
If you want a nice simple option that gives you some degree of styling, you can create a timer HERE and just embed it into your page with a small piece of code.
yeah this is a GREAT one, but problem I have is this links to the external site and i want to keep away from that if I can, if there is a way to pay to get it removed that would be good!
Its fully responsive too which is great.
The thing about countdown timers is they are usually only displayed for a fixed duration of time. That’s why it’s often simpler to use a third party for creating and hosting the timer. If, when you want to put a new one in place, you can create another one just as simply. If the third-party site is no longer available for some reason, just search for a new countdown generator.
