DonnaST Posted March 13, 2021 Share Posted March 13, 2021 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> Link to comment
paul2009 Posted March 13, 2021 Share Posted March 13, 2021 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
DonnaST Posted March 13, 2021 Author Share Posted March 13, 2021 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 paul2009 Posted March 13, 2021 Solution Share Posted March 13, 2021 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
DonnaST Posted March 13, 2021 Author Share Posted March 13, 2021 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
creedon Posted March 13, 2021 Share Posted March 13, 2021 Quote but sadly still not working. It appears you solved the issue? I seems to be working here. paul2009 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
DonnaST Posted March 13, 2021 Author Share Posted March 13, 2021 36 minutes ago, creedon said: It appears you solved the issue? I seems to be working here. 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
DonnaST Posted March 14, 2021 Author Share Posted March 14, 2021 Site URL: https://www.themumretreat.co.uk/membership Morning! I've got two countdown timers on one page, one is finally working, the other is not - but they have exactly the same code. Secondly, I now want to change the HEX colour code, but it refuses to change. Thanks for any advice you can offer! Link to comment
DonnaST Posted March 14, 2021 Author Share Posted March 14, 2021 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
paul2009 Posted March 14, 2021 Share Posted March 14, 2021 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. DonnaST and creedon 1 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
DonnaST Posted March 14, 2021 Author Share Posted March 14, 2021 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
ElizabethM Posted April 6, 2021 Share Posted April 6, 2021 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 ? Link to comment
ElizabethM Posted April 10, 2021 Share Posted April 10, 2021 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 ? 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
ElizabethM Posted April 20, 2021 Share Posted April 20, 2021 @paul2009 Do you know how i could fix this code that is not working 😕 Link to comment
paul2009 Posted April 20, 2021 Share Posted April 20, 2021 Please see the earlier posts in this thread. ElizabethM 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
javier-v Posted April 27, 2021 Share Posted April 27, 2021 Hello guys, I'm using a similar code for a countdown timer, made sure there are no spaces, specified a date in the future but still it does not show correctly. https://www.hateworks.net/vein-master Thanks in advance! Link to comment
brionyclements Posted August 11, 2021 Share Posted August 11, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment