Countdown Timer on webflow

Design help Custom code
#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:

1 Like
#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

2 Likes
#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:

3 Likes
#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:

54
Screen Shot 2018-03-14 at 17.36.54.png241×658 18.2 KB

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!

#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>

#17

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.