Jump to content

Countdown timer code not working - help please?

Go to solution Solved by paul2009,

Recommended Posts

Hello

I have some code for a countdown timer, but it's not working. Could someone please help me work out why?

I'm using a code block with HTML. Photo attached for what it looks like currently - but no numbers!

I'm not a pro web designer, but understand a little about coding.

Thanks in advance for your time!

<style>#countdown{color:#fff;display:inline-block;text-align:center;font-size:1.5rem} #countdown>div{padding:10px; background:#e2dbd6; display:inline-block} #countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown"><div><span class="days" id="day"></span><div 
class="text">Days</div></div><div><span class="hours" id="hour"></span><div class="text">Hours</div></div><div><span class="minutes" id="minute"></span> <div class="text">Minutes</div></div><div><span class="seconds" id="second"> </span><div class="text">Seconds</div></div></div><p id="timer"></p></center> <script>var deadline=new Date("jan 1, 2020 15:37:25").getTime();var 
x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t% 
(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t% 
(1000*60*60))/(1000*60));var seconds=Math.floor((t% 
(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getEl ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0) {clearInterval(x);document.getElementById("timer").innerHTML="TIME 
UP";document.getElementById("day").innerHTML='0';document.getElementById("hou r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get ElementById("second").innerHTML='0'}},1000);</script> 
 

clock.JPG

Link to comment
27 minutes ago, DonnaST said:

I have some code...but it's not working. I'm using a code block with HTML.

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
2 hours ago, paul2009 said:

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

Hi Paul

Thanks for your advice! Here is the link www.themumretreat.co.uk/membership

It's the pink timer I'm having trouble with, the blue one is a back-up for now.

Grateful for any help you can offer!

Link to comment
  • Solution

There are two issues.

Firstly, there are errors in your code. When you've copied the code you have introduced some additional spaces and line breaks. For example "getEl ementById" shouldn't have a space and neither should "innerHTM L". Take a look through the code and remove the errors first. 

The second issue is that you should be counting down to the date (in the first line), but right now you've specified a date in the past. 🙂

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
43 minutes ago, paul2009 said:

There are two issues.

Firstly, there are errors in your code. When you've copied the code you have introduced some additional spaces and line breaks. For example "getEl ementById" shouldn't have a space and neither should "innerHTM L". Take a look through the code and remove the errors first. 

The second issue is that you should be counting down to the date (in the first line), but right now you've specified a date in the past. 🙂

Thank you, I really appreciate your help. 

I knew the date wasn't set, but I've done all that you've said, but sadly still not working. I may have to live with the blue one.

Thanks again!

Link to comment
36 minutes ago, creedon said:

It appears you solved the issue? I seems to be working here.

 

Screen Shot 2021-03-13 at 1.39.15 PM.png

Hi

Yes I did thank you!!

However, I now have another problem - I want another timer lower down the page, have used exactly the same code, but it's not working. Cannot figure this out, any ideas please? thanks

Link to comment

Site URL: https://www.themumretreat.co.uk/membership

Hello

Would love some help please!

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code. I'm using a code block for each.

Also, I now want to change the HEX colour of the timer background blocks, but it refuses to change. 

Please know I am NOT a coder, but would be so grateful for any help.

Thank you 😃

Link to comment
1 hour ago, DonnaST said:

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code.

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

  • If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
  • The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:

<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:

<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
6 hours ago, paul2009 said:

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

  • If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
  • The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:


<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:


<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

Thank you so much Paul!!

This is really kind of you, I can't thank you enough. It took me a while to figure out what you were saying (not your fault, just a little way over my head) but I got there!!

Thank you so much x

 

 

Link to comment
  • 4 weeks later...
On 4/6/2021 at 2:12 PM, ElizabethM said:

Hi everyone, 

 

I'm struggling with this countdown, I think I miss something but I don't know what. 

Could you please help me to fix this ? 

 

Capture d’écran 2021-04-06 à 14.10.19.png

This is the code I used 

<style>#countdown{color:#f5f2ec;display:inline-block;text-align:center;font-size:1.5rem}

#countdown>div{padding:10px; background:#b79b7d; display:inline-block}

#countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown">

  <div>

    <span class="days" id="day">

    </span>

    <div

class="text">jours</div>

  </div>

  <div>

    <span class="hours" id="hour">

    </span>

    <div

class="text">heures</div>

  </div>

  <div>

    <span class="minutes" id="minute">

    </span>

<div class="text">minutes</div>

  </div>

  </div>

 

  <p id="timer"></p>

</center>

<script>var deadline=new Date("may 1, 2021 18:30").getTime();var

x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var

days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t%

(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%

(1000*60*60))/(1000*60));var seconds=Math.floor((t%

(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getEl

ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM

L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0)

{clearInterval(x);document.getElementById("timer").innerHTML="TIME

UP";document.getElementById("day").innerHTML='0';document.getElementById("hou

r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get

ElementById("second").innerHTML='0'}},1000);</script>

Link to comment
  • 2 weeks later...

Please see the earlier posts in this thread.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 3 months later...

Hello, 

 

I'm having a problem with my countdown timer, on the admin side it is working fine and counting down, but when I publish the numbers disapear. Could anyone help?

This is the website:

https://www.jaynepierson.com/

This is the code I am using:

 <style>#countdown{color:#white;display:inline-block;text-align:center;font-size:1.4rem} #countdown>div{padding:10px; background:#black; display:inline-block} #countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown"><div><span class="days" id="day"></span><div class="text">Days</div></div><div><span class="hours" id="hour"></span><div class="text">Hours</div></div><div><span class="minutes" id="minute"></span><div class="text">Minutes</div></div><div><span class="seconds" id="second"></span><div class="text">Seconds</div></div></div><p id="timer"></p></center><script>var deadline=new Date("sep 17, 2021 00:00:00").getTime();var x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t%(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%(1000*60*60))/(1000*60));var seconds=Math.floor((t%(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getElementById("hour").innerHTML=hours;document.getElementById("minute").innerHTML=minutes;document.getElementById("second").innerHTML=seconds;if(t<0){clearInterval(x);document.getElementById("timer").innerHTML="TIME UP";document.getElementById("day").innerHTML='0';document.getElementById("hour").innerHTML='0';document.getElementById("minute").innerHTML='0';document.getElementById("second").innerHTML='0'}},1000);</script>

 

Thanks in advance!

Briony

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.