Advertise here with BSA

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.

Live Demo – Download Source Code

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.

Live Demo – Download Source Code

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.

Advertise here with BSA

Advertise here with BSA

I have now launched my new responsive website design.

Visit Source

Advertise here with BSA

Advertise here with BSA

Painted in Photoshop > this set contains 22 icons, each created by hand and prepared to be used as transparent .png’s in three sizes: 128x128px / 64x64px / 32x32px

Visit Source

Advertise here with BSA

Advertise here with BSA

Fashy is a Blog and Portfolio WordPress Theme, suited for users who want to run a professional or personal blog and wants to showcase your products, services or news with a unique looking website.

Visit Source

Advertise here with BSA

Advertise here with BSA

The mere mention of using stock images use to bring up some heated discussion, followed by threats and proclamations of doom for freelancers. Time has proved the doom and gloom prophecies were over-exaggerated…

Visit Source

Advertise here with BSA

Advertise here with BSA

In the following tutorial you will learn how to create the simple Google Chrome icon in Adobe Illustrator.

Visit Source

Advertise here with BSA

Advertise here with BSA

Vantage is the latest theme from AppThemes which allows you to turn WordPress into a full featured business listings directory such as Yelp.com which allows businesses to add themselves and let customers rate them and leave comments. The theme has built-in monetization options so you can charge for listings, featured listings or place advertisements.

Visit Source

Advertise here with BSA

Advertise here with BSA

Once again, the brilliant theme designers have been busy and we have loads of great free WordPress themes for you this month, nice clean business theme, portfolio themes, responsive, sliders – you name it and we have you covered.

Visit Source

Advertise here with BSA

Advertise here with BSA

This film is a new 36 min sleep music addition to “Caribbean Lounge” 2 hour long collection of exotic HD landscapes with sounds of nature and peaceful melodies. Some of the sweetest lullabies with romantic guitar and soothing waves will softly surround you with peace and harmony. The full version of this relaxing sleep music film is now available in 1080p as well as 720p for computers and iPads.

SLEEP MUSIC
It’s only a 3 minute clip but it will really set you in a sleepy mood. Even in severe cases of insomnia, the full-length film worked miracles. Simply believe in what you see and hear. We recommend playing this sleep music film on a TV while in bed. Just relax and stop resisting it. Sweet dreams

RELAXING MUSIC
What do we usually have on TV while we eat at dinner table? I bet nothing similar to what you see above. I hope you’d enjoy spending some time to relax in a tropical paradise while having a great meal and a nice company beside you. I tried it myself dining with my wife and we had an amazing relaxing time, try it out folks. Don’t forget to plug a nice stereo system to enjoy this relaxing music. A full HD flat-screen would make things even better as you find yourselves on a vacation on a tropical island.

Web: http://www.loungev.com/ & http://www.downloadhdvideo.com/films/melodic-surf-sleep-music/

Visit Source

Advertise here with BSA

Advertise here with BSA

Mobile web browsing has never been more popular. It goes without saying that iOS, Android, and other mobile platforms are here to stay. At this point if you don’t have a mobile version of your blog then you are behind the times. Here are 30 of the best mobile WordPress themes around.

Visit Source

Advertise here with BSA