Stylish Countdown Timer & Page Lock?

Hi Jannis, thanks for the reply.

So if i had a 2 page site and one link was for page 2 and I wanted this protected, would this work…i guess there is a bit more involved…but its is workable i guess.

I have another option which I am looking at now within Blocs…

If too complex, I might have to jump ship to another platform for what I want to do for this simple 2 page site and one page locked with a simple password. id like to test this on preview etc before I host it.

The option @hendon52 showed was working nicely. It’s a real server side solution.

1 Like

Hi all,

Going back to the countdown bric - my client has seen this and does not like the display format of it, and I don’t like the week setting either = if you take off the week the days do not calculate. It can be time specific either and wish like how others have it - once the clock timer has ended a reveal or say a Bloc could open under it and have a promo code in or a Button to click to take you to the reveal - launch page etc. @Flashman have you used this or adapted it?

I take it there is no way to modify this to make it like how all the others out there are done? I am struggling to find something which has some style to it, or something I can style.I have found 2 but to turn off their link you need to subscribe to a 12 month package, and only need it for 4 weeks max when i use it. I do not mind paying for it - but don’t want to be in a 12 month deal with it.

Here is an example of what i’m after:countdown_timer_website_-_Google_Search

EDIT!!!

right, after a LOT of digging around on this forum, I found a few posts of what people have managed to do. I a bloc which I can edit to hope make it work, I just need to find a way to make the timer stop at the end and NOT go into a - countdown. A slow procedure ! but working…slowly.

I have attached an image of how I would like it to look.

Hi @AdieJAM,

Yes, I like the current countdown timer bric, but wish it had some additional formatting options.

I attached some code I found somewhere on this forum many months ago, but I can’t find it now. I also attached a screenshot of how it looks.

It works for me, so hopefully would work for you. The div part goes in a code brick wherever you want it to show, and the style + script part I put in blocs project header. I’m not really familiar with coding aspects, but I think will stop and show zeroes when countdown runs out. If you or someone else determine how to add colons to output, please let me know. Btw, I’m sure others can provide other countdown examples.

Hope this helps. Please let me know if you find any corrections/error.

pruthe

countdown.txt.zip (1.2 KB)

1 Like

I haven’t needed the bric on any site. This is the only code I have that might work with Bootstrap:

<My wife has dragged me down to Perranporth beach. Impossible traffic and a nightmare for parking with all the tourists. We stood on the beach with a force 10 gale and now she is dragging me around tourist shops. Please send help>.

2 Likes

Hi @pruthe - thank you.

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.

“Time” to go to school :wink:

This page will take you through the code and show you how to do it. It even has an option to add something for it to do when the countdown finishes.

Set your own classes and style the timer.

2 Likes

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 :laughing:

haha !..lol

Nope !!!

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

1 Like

Thank you.

I’ll try a few more times.
If not I’m gonna have to jump ship on this project.

I can change things on the layout I don’t want - and can’t change on the Layout I want!

Was fun trying for a while! Then watching the timer get to zero for the 85th time and show -0 started getting a bit anoying!

@AdieJAM

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

<style>
.countdown {
  color: #000000;
  text-align: center;
}
.countdown li {
  display: inline-block;
  font-size: .9em;
  list-style-type: none;
  padding: .5em;
  text-transform: uppercase;
}
.countdown li span {
  display: block;
  font-size: 1.9rem;
}
</style>
1 Like

Hi again @AdieJAM,

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.

Hope this helps you.

pruthe

countdown2.txt.zip (1.2 KB)

1 Like

Thank you @pruthe, i will be back on shortly and ill have a look. Thank you - really appreciate it.

Hey @AdieJAM,

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.

Take care,

pruthe

countdown3.txt.zip (1.2 KB)

1 Like

WOW!..fab, ill try this one now - HUGE thanks ! I will let you know how I get on !

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.

3 Likes

HI @hendon52,

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.