I imagined this would be super-simple, but it is eluding me so far. I would like to know how I can implement a timer that counts down to a specific date and can be styled with CSS.
Specifically, I have designed a background image/container and want to style the numbers so they are correctly positioned, sized, coloured and in the correct font.
There are a raft of JS and jQuery countdown timers, but none I have found output in a manner which is easy to target with CSS. Modifying the output strings (i.e. including div tags) only seems to break them, although my JS knowledge is not great enough to understand why (a guess, is that the scripts seem to target a certain div class and 'inject' the appropriate code. Perhaps introducing new divs screws this up?)
I guess my question would have to be... 'what is the easiest way to implement a countdown to a specific date, which can be styled with CSS?', although if you know of an existing plug in that does this, I will love you forever!
I imagined this would be super-simple, but it is eluding me so far. I would like to know how I can implement a timer that counts down to a specific date and can be styled with CSS.
Specifically, I have designed a background image/container and want to style the numbers so they are correctly positioned, sized, coloured and in the correct font.
There are a raft of JS and jQuery countdown timers, but none I have found output in a manner which is easy to target with CSS. Modifying the output strings (i.e. including div tags) only seems to break them, although my JS knowledge is not great enough to understand why (a guess, is that the scripts seem to target a certain div class and 'inject' the appropriate code. Perhaps introducing new divs screws this up?)
I guess my question would have to be... 'what is the easiest way to implement a countdown to a specific date, which can be styled with CSS?', although if you know of an existing plug in that does this, I will love you forever!
Share Improve this question edited Dec 5, 2011 at 17:55 Adam Rackis 83.4k57 gold badges278 silver badges400 bronze badges asked Dec 5, 2011 at 13:48 minimal_minimal_ 291 gold badge3 silver badges5 bronze badges2 Answers
Reset to default 2This is a very useful plugin for countdowns ... everything is written within a div and span's so you can easily style it with CSS - you could use images if you reallu needed to
http://keith-wood.name/countdown.html
I've used this: http://www.littlewebthings./projects/countdown/example/
And I can say it's awesome.
Unfortunately it's not in pure CSS, there are images, and the switch is not smooth.
But you can always learn how to make a beautiful countdown like that by studying how it works.
Here you can download the source code: http://www.littlewebthings./projects/countdown/downloads/lwtCountdown-php.zip
Hope it helps.