How to Code a jQuery Rolodex-Style Countdown Ticker

I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect.

More specifically I have seen a couple countdown widgets on landing pages. These are numbering systems for websites which count down to a specific launch date. You could alternatively use this code to create a live clock on your website – there are so many uses available! Check out my simple tutorial below and see if you can implement a similar ticker into any future web projects.

Selecting Graphics

I am admittedly not an amazing Photoshop design guru. I can put together some unique web layouts and magazine themes – but I can’t create a whole rolodex stack from scratch. This is where the large network of PSD freebies comes in handy.

I really love this flip-clock countdown for both the gradients and textures. This was created by Orman Clark who also built the website Premium Pixels. Just download the PSD and extract a single card stack background. We will use this same background for each of the time slots – days, hours, minutes, and seconds.

However I want to use dynamic HTML inside each div to update the counter. So when you extract these blocks make sure you hide all the text layers, including the bottom labels. Or even easier just download my tutorial source code above and use the included images.

Core HTML Layout

For this example we don’t need a whole bunch of confusing HTML markup. I’m using a containing div #clock-ticker set with a clearfix class, and inside we have 4 different floating divs. These are set to the class .block and each contains a single column of the countdown clock.

<div id="clock-ticker" class="clearfix">
	<div class="block">
		<span class="flip-top" id="numdays">8</span>
		<span class="flip-btm"></span>
		<footer class="label">Days</footer>
	</div>
	
	<div class="block">
		<span class="flip-top" id="numhours">14</span>
		<span class="flip-btm"></span>
		<footer class="label">Hours</footer>
	</div>
	
	<div class="block">
		<span class="flip-top" id="nummins">34</span>
		<span class="flip-btm"></span>
		<footer class="label">Mins</footer>
	</div>

Inside a single block area we have three core sections. The top two span elements contain the top and bottom portion of each rolodex card. By splitting up the card we could use some further jQuery UI animation effects. But this goes much further than I’d like to cover here – although it is possible to build off this preset code.

#clock-ticker { display: block; margin-bottom: 15px;}
#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; }

#clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }
#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; }

#clock-ticker .block .label { color: #fbfbfb; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif; text-shadow: 1px 1px 0px #333; }

The last area contains the label text for each card. This is held inside an HTML5 footer element and styled with a bit of CSS. I should point out how many of these elements are set to a fixed height. This means we can ensure the layout won’t break even if our numbers were “too big” and pushed outside the box model.

Detecting Clock Numbers

Inside the top span area of each column I’ve appended some default numeric values. You can change these to whatever you’d like and the script should still count down directly to 0. But just remember you don’t need anything in the bottom section, and actually I built it this way to keep the code cleaner.

Our goal would be to then check each of these numerical values on pageload and set them to static variables. You can see I have done this within the first few lines of JavaScript. The jQuery library is included in the doc header, but all our JS codes are actually inside a script tag towards the bottom of the page.

<script type="text/javascript">
$(document).ready(function(){
	var theDaysBox  = $("#numdays");
	var theHoursBox = $("#numhours");
	var theMinsBox  = $("#nummins");
	var theSecsBox  = $("#numsecs");

These variables target the span elements themselves, and not the internal content. We do this in a different set of vars because the numbers will be updated every second. I’ve stuck with plain JavaScript and the setInterval() method.

Using this predetermined timing function we offer an internal set of code to call every set number of milliseconds. In this example we call the function code every 1000 milliseconds, or 1 second. Let’s look at some example syntax first:

var myNewIntval = setInterval(function() {
   /// we use code here
   }, 1000);

The method only requires 2 parameters with the latter being a number of milliseconds. The first is the code you wish to execute every set interval of time – most ideally we want to use a custom function. Alternatively we could write a new function name and call this, but we aren’t saving much space either way.

JavaScript setInterval()

Even if you aren’t totally familiar with this method don’t worry too much since it’s easy to catch up. Let’s push forward with the script and look at our real-live example.

var refreshId = setInterval(function() {
  var currentSeconds = theSecsBox.text();
  var currentMins    = theMinsBox.text();
  var currentHours   = theHoursBox.text();
  var currentDays    = theDaysBox.text();

Inside the interval function we’re setting another four variables. These will be updated each second to contain the new value of each span element. Since we’re counting down to a specific number I’m going to use a very basic set of logic to check the timers.

In layman’s terms we need to see if any of the numbers reach 0 during any given interval. If that’s the case we can’t let it turn to -1 in the next second, and so instead we deduct a value from the next set (secs -> mins -> hours -> days).

Base Timing and Logic

Anybody who is familiar with basic if/else statements should be able to follow this script. We’re going to check at each interval if any of the numerical values have hit 0 – or if more than one value has hit 0.

For example, if the seconds and minutes have reached 0 then we need to remove 1 hour from the clock and reset the mins/secs to 59. Same when the hours, minutes, and seconds reach 0 and we need to remove 1 day from the clock.

if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
  // if everything rusn out our timer is done!!
  // do some exciting code in here when your countdown timer finishes
} else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
  // if the seconds and minutes and hours run out we subtract 1 day
  theDaysBox.html(currentDays-1);
  theHoursBox.html("23");
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0 && currentMins == 0) {
  // if the seconds and minutes run out we need to subtract 1 hour
  theHoursBox.html(currentHours-1);
  theMinsBox.html("59");
  theSecsBox.html("59");
} else if(currentSeconds == 0) {
  // if the seconds run out we need to subtract 1 minute
  theMinsBox.html(currentMins-1);
  theSecsBox.html("59");
} else {
  theSecsBox.html(currentSeconds-1);
}

I’m using the jQuery .html() method to set the internal value for each span. The very first if() {} statement checks for the timer completely running out, and you can place any code inside here. This could fade out and display a signup/registration form. Or it could re-direct visitors to a new page once the timer has finished.

There is definitely a lot you can do to customize this code for your own ideas. The clock will always tick down in this code, but that is easy to change. And if you refresh the page all values will reset to their original static setup inside the HTML document. Unfortunately session variables are controlled on the server end, so there’s no way to do this using solely JavaScript.

Conclusion

I hope this quaint clock ticker can be useful to some web designers. It’s a cool widget when you need it, but it’s also hard to just squeeze into a web layout. Practicing with JavaScript is also handy the more you move into web development techniques. Feel free to download my source code and play around on your own. If you have any ideas or suggestions you can share with us in the post discussion area below.