Hi, I am trying to implement your CountDown timer just like your demo page using HTML5 canvas. The problem I am having is controlling the width/height. I have it working at 100% of the background image width, but need to be able to set it to 80% (or some other %). I see width and height configuration values towards the bottom of the demo page, but not in the actual code documentation or example configuration. They only reference changing the DIV size, which won’t work for my use case. Thank you.
Why do you wont to change size of canvas. Width of canvas is equal of the div. Change div’s width.
Hi, Thanks for some great code. I might be being stupid but how do I get the countdown time to appear over the top of a graphic as on your demo page. I am using a normal jpg file for the image and would like the timer over the top of this. Thanks for any help
Hello, you can copy code from my demo page. To make one layer over other you have to use z-index. Look here: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
Hi Papanderos, Of course, thanks for your help. Works perfect now!!
Hi, I am testing the code out on this page https://www.onepagecrm.com/sales-resources-cold-email-templates-mautic but there seems to be a blank image (canvas) pushing the time down the page.
How can I get the time to appear under the text please?
Hello, It is very strange. Try to set image height on line 1201 in CountDownJS.js:
That worked. Thank you.
Hello, is there a setting to redirect to a url when time is up ? Thanks
Hello, tere is function in script which start after the end of the count down. You can past your code there.
I use this editor: http://brackets.io/
No, i didn’t mean which editor you use, i mean how / with what did you encrypt countdownjs.js ?
good work – amazing
I wonder how to incorporate your code into a Wordpress page. Any experience?
Hello, I do not know how it works wordpress. The script work directly with html. Has the ability to embed the code in WordPress ?
Hi, I want a “countdown” only days. This code I can determine the date the countdown will end? Thanks
Hello. There is function in script which start when the code is end.
Hello, thanks for your script. It looks great on desktop version, but it seems, that it’s a bit blurry on smartphone displays (e.g. on Sony Xperia Z3 Compact). Is there a way to increase the canvas resolution (ppi?) or another trick for fixing this? Thanks a lot!
Hello, can you send me screenshot?
Sure, I’ve sent you a PM.
How can I integrate this with WordPress? Many of us use the combination of WordPress and Avada. Thanks!
Hello, I do not know how it works with wordpress. The script work directly with html. Has the ability to embed the code in WordPress ?
I purchased this plug in and it’s working great. Would you be able to advise if there is a way yo change the font?
Thanks in advance,
line 55 at CountDownJS.js.(CanvasContext.font = 60*param.elementSize + “px Open Sans”;)
Thanks for your speedy response. I did see this code initially but thought that this will only show after the timer ends. Are you able to inform me where I would need to input the above code? Any info would be greatly appreciated. Thanks in advance.
Doesn’t matter. Had a brain fart moment. Thanks for your response.
Sorry, I’m back again. Is the font only going to change upon the timer ending? Or will I have to set a new timer in place for the new font to be included on the Countdown timer?
You can change font for the colons(line 162) and text(line 853)
Thanks. Last question – Is there anyway I can change the font of the numbers on the timer?
No you can not. The digits as vector shapes.
Suggestion: Maybe include a few simple (one-page) fully responsive templates. The countdown timer resizes, but the demo screen text does not. Not a big deal for most, but for newbs to get up and running fast it might be nice for them to just be able to edit the text and change the images for customization. Just a thought.
Thank you for your feedback. I finalize the instructions and prepare a new version of the product.
I purchased this plug in for use in a Wordpress theme but have a question. When the timer counts down to the end of its countdown it displays the end for about 10 seconds – Is there a way I can permanently show the end or a custom message until the next countdown is initiated?
Great Plug In.
Look forward to your response.
Hello, yes there is function in countdownjs.js file which start after the timer end.
Thank you very much.
Thanks for your response yesterday, unfortunately, I am unable to ascertain what exactly I would need to do in order to permanently display the message.
Are you able to provide me with instructions on how to achieve this please?
Please write me email from my profile page. Give me the link of page with script and which message you would like to show.
Could you please help me. I need stop and restart countdown. How can I do it?
please write me email from my profile page
Hi there, lovely script. Thank you.
However, the TimerEnd function is not working properly… the text cannot be seen.
It flashes on the screen for a moment and then is invisible. I’m using Firefox.
I am using a white background, is this the problem? If so, how can I change the color of textC?
//when timer less then 0
CanvasContext.clearRect(0, 0, Canvas.width, Canvas.height);
CanvasContext.fillStyle = textC;
CanvasContext.font = 60param.elementSize + "px Open Sans";
CanvasContext.textAlign = "center";
CanvasContext.fillText("The Offer Has Ended. Sorry!", Canvas.width/2, 84.5param.elementSize);
Is it just one line in function? To set color use CanvasContext.fillStyle =”#000000”;
Yes it is just one line
Worked fine… thank you
you are welcome
Is there a way to eliminate the “seconds” from the clock?
Send me email from my profile page, please.
Is it possible to use this countdown in an email ?
Hi, no, it isn’t
Hi Bro! Can you tell me how to have the countdown cover only 1 hour (60min) ?
I am located in Europe, but the promo will be for different parts of the world.
So everyone who gets on the page should have a countdown of 60 min starting,
no matter where they live.
What do i have to change (please be specific) to achieve that ? Thanks!
Hi, write me email from my profile page, please
By the way, i think this is the most beautiful countdown system IN THE WORLD.
I could never use another one again.
Did you anser my request yet ?
Thanks! Works like a charm !!
Is it possible to use this script also as a normal clock instead of a countdown?
Hello, no the script does’t support this modification
Is there a way to add this option … I want to show a big flip clock on my website … I have a website called onlineclock and only want to show a clock there
It is too difficult to make so changes.
Actually I’d like something like this with your flip clock. There’s a countdown and clock there.
It is necessary to completely rewrite the script
I’m a bit frustrated trying to get this to work. The directions say:
“Past with countdown options.”
I assume you mean “paste” instead of “past”? And where do I paste from? Because I don’t see that exact html shown in the picture anywhere in the code, so unless I’m just supposed to type everything from the picture (which would be super time consuming) I don’t understand where I’m pasting the code from.
Thanks for your help,
Hello, write me email from my profile page. I try to help you
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $3.50
This item was featured on CodeCanyon
Unlimited graphic downloads & digital courses. Only $29/month
22,000+ templates & 1,000+ courses
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work