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