Products that might interest you: Joomla Subscription Component, Drupal Subscription Module, PHP Nuke Subscription

jQuery Count Down

There are numerous times when you need a count down timer. This can be done without jQuery but with many websites using jQuery, why not write this tutorial for it :)

The example below is the jQuery count down in action.

Go Daddy $1.99 Web Hosting

Now you see it in action, let's get to the codes. It is really simple actually. I will assume that you have already included the jquery javascript in the header of your page. If you have not already done that, please read up on how to include jquery core file.

First we open javascript tag

<script type="text/javascript">

Our next step is to write a var that will contain the total lenght of the timer. This is in seconds and in our example it is 50

var wsCount = 50;//this is the count down time

We next need to use jQuery to start our count down on document load. Our count down is inside a function that I will explain later.

 
$(document).ready(function() {
	startCountdown();//load the count down function on document loaded.
	});

As you can see we are running the function startCountdown() when the document has finished loading.
Now we write the count down function that will reload itself until the value is less than 0

 
function startCountdown() { 
if((wsCount - 1) >= 0){ 
	wsCount = wsCount - 1; 
	$("#ws_counter").html('Counting down <font style="font-size:125%;"> <b>' + wsCount + '</b></font> seconds.'); 
 
  setTimeout(startCountdown, 1000);    
} 
else{ 
	$("#ws_counter").html('You have reached the end of the count down');
} 
 
   }

The startCountdown function is really simple, what is does is first check to see if the var wsCount is 0, if not it will load content in anything that has the id ws_counter. The function will then minus 1 from the count until it reaches 0.
It will also reload the function every second(setTimeout(startCountdown, 1000); until the var wsCount value is 0. Once it is 0, the function will then update the id ws_counter with the text 'You have reached....'
In our example, the id ws_counter is a paragraph with styling.

<p id="ws_counter"></p>

Let's put the entire codes together.

 
<script type="text/javascript">
 
 
var wsCount = 50; 
 
$(document).ready(function() {
	startCountdown();
	});
 
function startCountdown() { 
if((wsCount - 1) >= 0){ 
	wsCount = wsCount - 1; 
	$("#ws_counter").html('Counting down <font style="font-size:125%;"> <b>' + wsCount + '</b></font> seconds.'); 
 
  setTimeout(startCountdown, 1000);    
} 
else{ 
	$("#ws_counter").html('You have reached the end of the count down');
} 
 
   }
 
 
 
</script>
<p id="ws_counter" class="message"></p>

Very simple uh? You can use this in your scripts to even countdown until christmas or birthday and so on. We are available for custom work. Post a project to our workboard.