Hey . I am very beginner … can you please help me to set up countdown timer ?
Ya … That`s right ,.Thanks for your replay …! See i am creating event page for my company and i need to setup countdown … Ok so where can i get that jquery source code Or give me some guide … …
html
<div class="digits"></div>
Put this within the first field in Custom Code section After <head> tag.
/*
* jquery-countdown plugin
*
* Copyright (c) 2009 Martin Conte Mac Donell <Reflejo@gmail.com>
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*/
jQuery.fn.countdown = function(userOptions)
{
// Default options
var options = {
stepTime: 60,
// startTime and format MUST follow the same format.
// also you cannot specify a format unordered (e.g. hh:ss:mm is wrong)
format: "dd:hh:mm:ss",
startTime: "01:12:32:55",
digitImages: 6,
digitWidth: 67,
digitHeight: 90,
timerEnd: function(){},
image: "digits.png"
};
var digits = [], intervals = [];
// Draw digits in given container
var createDigits = function(where)
{
var c = 0;
// Iterate each startTime digit, if it is not a digit
// we'll asume that it's a separator
for (var i = 0; i < options.startTime.length; i++)
{
if (parseInt(options.startTime[i]) >= 0)
{
elem = $('<div id="cnt_' + c + '" class="cntDigit" />').css({
height: options.digitHeight,
float: 'left',
background: 'url(\'' + options.image + '\')',
width: options.digitWidth
});
elem.current = parseInt(options.startTime[i]);
digits.push(elem);
margin(c, -elem.current * options.digitHeight * options.digitImages);
// Add max digits, for example, first digit of minutes (mm) has
// a max of 5. Conditional max is used when the left digit has reach
// the max. For example second "hours" digit has a conditional max of 4
switch (options.format[i])
{
case 'h':
digits[c]._max = function(pos, isStart) {
if (pos % 2 == 0)
return 2;
else
return (isStart) ? 3: 9;
};
break;
case 'd':
digits[c]._max = function(){ return 9; };
break;
case 'm':
case 's':
digits[c]._max = function(pos){ return (pos % 2 == 0) ? 5: 9; };
}
++c;
}
else
{
elem = $('<div class="cntSeparator"/>').css({float: 'left'})
.text(options.startTime[i]);
}
where.append(elem)
}
};
// Set or get element margin
var margin = function(elem, val)
{
if (val !== undefined)
{
digits[elem].margin = val;
return digits[elem].css({'backgroundPosition': '0 ' + val + 'px'});
}
return digits[elem].margin || 0;
};
var makeMovement = function(elem, steps, isForward)
{
// Stop any other movement over the same digit.
if (intervals[elem])
window.clearInterval(intervals[elem]);
// Move to the initial position (We force that because in chrome
// there are some scenarios where digits lost sync)
var initialPos = -(options.digitHeight * options.digitImages *
digits[elem].current);
margin(elem, initialPos);
digits[elem].current = digits[elem].current + ((isForward) ? steps: -steps);
var x = 0;
intervals[elem] = setInterval(function(){
if (x++ === options.digitImages * steps)
{
window.clearInterval(intervals[elem]);
delete intervals[elem];
return;
}
var diff = isForward ? -options.digitHeight: options.digitHeight;
margin(elem, initialPos + (x * diff));
}, options.stepTime / steps);
};
// Makes the movement. This is done by "digitImages" steps.
var moveDigit = function(elem)
{
if (digits[elem].current == 0)
{
// Is there still time left?
if (elem > 0)
{
var isStart = (digits[elem - 1].current == 0);
makeMovement(elem, digits[elem]._max(elem, isStart), true);
moveDigit(elem - 1);
}
else // That condition means that we reach the end! 00:00.
{
for (var i = 0; i < digits.length; i++)
{
clearInterval(intervals[i]);
margin(i, 0);
}
options.timerEnd();
}
return;
}
makeMovement(elem, 1);
};
$.extend(options, userOptions);
createDigits(this);
intervals.main = setInterval(function(){ moveDigit(digits.length - 1); },
1000);
};
Here is the image used in there:
1 Like
Hey guys I’m kind of a novice at this. How do I get this to work? Thanks!
Hey @bartekkustra 
I tried this countdown out but it does only give be this error message about an invalid code. Is it possible to help me?
wrap your code in
<script></script>
tags
1 Like
Hi again,
I got the code to work (not getting the onavlid error message) but i cant get it to work in my design.
Im new into Webflow, but what I did was ti ad that class “digits” ti a div block. Is that correct?
My best
Custom code doesn’t show up in the designer. If you want to add code that will show up in the designer add the code into an embed element.
Hi Daniel,
Did you ever get it to work.
I have tried all sorts of variants but without success.
I’ve had this working in webflow sites:
I couldn’t get the fancy flip-down numbers working but simple text based countdown was easy enough by following the instructions.
Good luck
Hi guys, I’m trying to get this countdown timer into my website, I added it into the custom code box and the div block in the html but I’m not sure what to do next, did anyone else get it to work on their site?
but how to insert image into the project? to make it as a background of div ? I think that the script don’t see the image
Upload image to your project as an image on website, publish and go to that published website. Right click on that image and select “Copy link to that image”. Then in script change digits.png to whatever link you have copied (so just hit cmd+v or ctrl+v if you’re on Windows.
1 Like
Please can you break this process down for a full blown novice like me? I’ll appreciate your help.
I have also tried this, but it didnt work? Does anybody have a solution for this?