jQuery Countdown with Background and Overlay
May 22nd, 2009 10:57am in clients, countdown, css, html, jquery, timer
We got pulled into a quick little job with Duz Creative and their client, Healthland. With the economic stimulus package creating a large volume of work in the Electronic Medical Records industry, there is quite literally a countdown to the cut off dates that Hospitals and Clinics have to achieve the maximum benefit of implementing EMR. Hence, a styled, jQuery Countdown powered object with many thanks to Keith Wood for its availability:
The countdown is also published on the Healthland website on their Stimulus Funding page, and looks something like this:
To achived the affect above was straight forward: use one container div, with a shaded background that contains the countdown digits as manipulated by jQuery Countdown, then overlay a second div containing a transparent GIF image on top using the absolute positioning capability of CSS.
Download
Need to use this for yourself? Just download the zip file containing everything you need to make it happen. The countdown library that you're downloading has a patch in it to display three digit days as opposed to just two digits like the original library has. I've sent a note to Keith about it, and maybe he will release a new version of the library with the patch in there soon.