jasminesarian Posted September 9, 2020 Share Posted September 9, 2020 Site URL: https://www.laboratoryartscollective.com/about Is it possible to add a countdown timer to a website's lock screen or cover page? My client would like a dramatic countdown-to-launch landing page set as the home page for 7 days before website launch / a virtual launch party. I have code for a basic free countdown ticker, I just have no clue where/how to implement it, if it's at all even possible. Thanks in advance for any help! Link to comment
Solution CubeSquared Posted November 30, 2020 Solution Share Posted November 30, 2020 Add this to your site, under Settings - Advanced - Code Injection, then scroll down to the Lock Screen section, add this code. The sections in red will need changing to suit whatever you're counting down to and you can play around with fonts, colours, etc. <div class="container"> <h1 id="headline">Countdown to my whatever:</h1> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> <div class="message"> <div id="content"> <span class="emoji">🥳</span> <span class="emoji">🎉</span> <span class="emoji">🎂</span> </div> </div> </div> <style> /* general styling */ * { box-sizing: border-box; margin: 0; padding: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { height: 100%; margin: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { align-items: center; background-color: #ffd54f; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .container { color: #333; margin: 0 auto; text-align: center; } h1 { font-weight: normal; letter-spacing: .125rem; text-transform: uppercase; } li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase; } li span { display: block; font-size: 4.5rem; margin-bottom: 2rem; } .message { font-size: 4rem; } #content { display: none; padding: 1rem; } .emoji { padding: 0 .25rem; } @media all and (max-width: 768px) { h1 { font-size: 1.5rem; } li { font-size: 1.125rem; padding: .75rem; } li span { font-size: 3.375rem; } } </style> <script> (function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let birthday = "Dec 31, 2020 00:00:00", countDown = new Date(birthday).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { let headline = document.getElementById("headline"), countdown = document.getElementById("countdown"), content = document.getElementById("content"); headline.innerText = "It's my birthday!"; countdown.style.display = "none"; content.style.display = "block"; clearInterval(x); } //seconds }, 0) }()); </script> Hope this helps! Good luck. (www.twitter.com/cubesqddigital) goldensealight, LoganPR, SpencerC and 1 other 1 2 1 Link to comment
lepanipwoblem Posted May 8, 2021 Share Posted May 8, 2021 Hi, I need your help ! I have included the code you indicated to have a count of time (hour and day) from today but when I look on the website I can see hours and days but not the corresponding numbers! would i have forgotten something Link to comment
tuanphan Posted May 9, 2021 Share Posted May 9, 2021 On 5/8/2021 at 9:02 PM, lepanipwoblem said: Hi, I need your help ! I have included the code you indicated to have a count of time (hour and day) from today but when I look on the website I can see hours and days but not the corresponding numbers! would i have forgotten something Can you share link to your site? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lepanipwoblem Posted May 12, 2021 Share Posted May 12, 2021 https://lepanipwoblem.com/boutique/punch-coco Link to comment
tinypops Posted November 9, 2021 Share Posted November 9, 2021 @CubeSquared & @tuanphan Thank you for providing the above info. I'm using this code and it works "great"! I've dangerously customized (read: bastardized 🥴) the code to auto display an image at the end of the countdown vs emojis. But i'm having 3 main issues that i'm hoping you can help me with...pleeeeaase? 🥺 1. Half the time the countdown numbers just don't load. Any ideas why? (img attached) 2. I try to customize css to reduce the leading between the h2 and body, but it then effects every h2 line-height on my site. (img attached) and 3. When I try to insert a background image, it pretty much shuts my site down. Any info would be super helpful and appreciated. https://contrabass-round-d5yj.squarespace.com/ wethepeoplesbefore Link to comment
tuanphan Posted November 11, 2021 Share Posted November 11, 2021 On 11/10/2021 at 6:20 AM, tinypops said: @CubeSquared & @tuanphan Thank you for providing the above info. I'm using this code and it works "great"! I've dangerously customized (read: bastardized 🥴) the code to auto display an image at the end of the countdown vs emojis. But i'm having 3 main issues that i'm hoping you can help me with...pleeeeaase? 🥺 1. Half the time the countdown numbers just don't load. Any ideas why? (img attached) 2. I try to customize css to reduce the leading between the h2 and body, but it then effects every h2 line-height on my site. (img attached) and 3. When I try to insert a background image, it pretty much shuts my site down. Any info would be super helpful and appreciated. https://contrabass-round-d5yj.squarespace.com/ wethepeoplesbefore #1. It looks fine to me #2. It looks like you added something to code. Can you post current code in Code Block? I think some code is missing, thus you can't control spacing between that. #3. Add image with code or? Which code did you try? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tinypops Posted November 12, 2021 Share Posted November 12, 2021 #1 Maybe its just being buggy on my end? As long as it's working for others, I'm good! #2. I was able to tinker around with it and the leading is working for me now, however, the image that I have set to display at the end of the countdown (which was working in the beginning) now no longer works, the entire section block disappears when the countdown is reached. Can you let me know what I'm doing wrong? Here is the code: <div class="container"> <h1 id="headline">CELEBRATING 25 YEARS</h1> <body id="body">Join First Peoples Fund and The Kennedy Center in honoring native culture sovereignty, heritage, and vitality.<body> <br> <br> </body> </body> <div> <div> </div> <div id="countdown"> <ul> <li><span id="days"></span>days</li> <li><span id="hours"></span>Hours</li> <li><span id="minutes"></span>Minutes</li> <li><span id="seconds"></span>Seconds</li> </ul> </div> <div class="message"> <div id="content"> <span style="padding-right:3px; padding-top: 3px;"> <img class="manImg" src="https://static1.squarespace.com/static/6165ed53b4dd8e5edd18bd8b/t/618d76478abf5f110597eb0b/1636660807800/countdown_deliver.jpg"></img> </span> </div> </div> </div> <style> /* general styling */ * { align-items: center; box-sizing: border-box 1925 x 500; margin: 10; padding: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { height: 100%; margin: 0; } .sqs-slide-wrapper[data-slide-type="lock-screen"] .sqs-slide { align-items: center; background-color: #ffffff; display: flex; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ariel" "Helvetica Neue", sans-serif; } .container { color: #00000; margin: auto; text-align: center; } h1 { font-weight: regular; letter-spacing: .5rem; text-transform: uppercase; } li { display: inline-block; font-size: 1em; list-style-type: none; padding: 2em; text-transform: uppercase; } li span { display: block; font-size: 8rem; margin-bottom: 4rem; } .message { font-size: 4rem; } #content { display: none; padding: 1rem; } .emoji { padding: 0.25rem; } @media all and (max-width: 768px) { h1 { font-size: 1.5rem; } li { font-size: 1.125rem; padding: .75rem; } li span { font-size: 3.375rem; } } </style> <script> (function () { const second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24; let birthday = "feb 3, 2022 24:00:00", countDown = new Date(birthday).getTime(), x = setInterval(function() { let now = new Date().getTime(), distance = countDown - now; document.getElementById("days").innerText = Math.floor(distance / (day)), document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)), document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)), document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second); //do something later when date is reached if (distance < 0) { let headline = document.getElementById("headline"), countdown = document.getElementById("countdown"), content = document.getElementById("content"); headline.innerText = "JOIN THE CELEBRATION"; countdown.style.display = "none"; content.style.display = "block"; clearInterval(x); } //seconds }, 0) }()); </script> #3. I've decided white is a lovely background color and i have bigger issue to worry about. 🤣 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