Streaming live at 10am (PST)

Countdown Timer on webflow


#1

Looking to add a countdown timer on my webflow site: http://prestonattebery.webflow.io/

Seen a few things and came across this widget, not sure how to install though. Can anyone help?

http://hilios.github.io/jQuery.countdown/


Here is my public share link: https://preview.webflow.com/preview/prestonattebery?preview=72cc850b0483a95d2729ebf94428abf2
(how to access public share link)


#2

Maybe using something like this would be easier:

You could just copy that code and embed it:

hope this helps :slight_smile:


#3

Is there anyway to adjust the font/color/spacing on this within Webflow?


#4

I’m still looking to do something custom on my site to create a countdown timer that repeats every 24 hours.

I found this: https://codepen.io/derrickmckeown/pen/KLDhk

How do I install this on my site?


#5

That’s very easy. Copy all the JS to the Page Footer Custom Code, then add the ID of the-final-countdown to a div, and then put a paragraph inside it. (style the text using Webflow). Publish and view on the live site.


Also, feel free to contact me for further code help and/or customization of third-party plugins


#6

Hi all, sorry to bother you with the same topic over and over - however it seems fairly easy to do, following the steps the timer doesn’t show up on my page when I publish it. I’m concerned about the script link, basically I uploaded the code (http://hilios.github.io/jQuery.countdown/) in a public repository on github and created a permalink. Is it possible that this might be the problem? Any recommendations of a trustworty online repo for where to pull the code from?

Thanks in advance!
Greetings.


#7

is this a Countdown Timer app …? Can i implement it in my website although i have checked it but no idea and currently i found an article with some best countdown timer shopify apps at https://www.withintheflow.com/countdown-timer-shopify/


#8

Could you help me editing the JS for selecting specifically what time the countdown starts from? Also how do you add days?

setInterval(function time(){
var d = new Date();
var hours = 24 - d.getHours();
var min = 60 - d.getMinutes();
if((min + '').length == 1){
min = '0' + min;
}
var sec = 60 - d.getSeconds();
if((sec + '').length == 1){
    sec = '0' + sec;
}
jQuery('.the-final-countdown p').html(hours+':'+min+':'+sec)
}, 1000);

#9

Hi. I created small tutorial for adding countdown custom code. Please check the link. Hope it helps:


#10

Thank you very much I’ll take a look.


#11

Hi @inutero , the countdown does not seem to work. I’ve followed your tutorial, could you please take a look?

https://preview.webflow.com/preview/petcommunity?preview=76abb93b86403a3e5400796e0fae74e0

Thank you!


#12

Hi!

I think you need to define ID to each numbers. for example for day it should look like this:

And keep adding to the rest:

for hours: hour-number
for minutes: minute-number
for seconds: second-number

Hope it helps.

Thanks


#13

Oh gotcha! I was just assigning it a class. Thanks!


#14

Hi there. I believe this feature no longer works due to the new JQuery update (just my hunch).

The numbers don’t move at all, the numbers in the timer are all 0’s. Anyone seeing it differently?

e.g.: https://stensul.com/events/sirius-decisions


#15

Try this in the head and publish @Taylor_made48

<script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>


#16

Unless I’m posting it incorrectly, no go from that.

I pasted in Head code in site settings, and at the page level.

Here’s my site’s read-only link: https://preview.webflow.com/preview/stensul?preview=a54958cc79cf1175dda749f235ccc546