php ajax/jquery countdown

I recently came across the need to have a countdown displayed in one of our applications. I was going to be releasing a new version of our app and wanted the users to have an idea of how long it was going to take until the application was up and running. After a few searches I found a plugin that does just what I needed, it is a jquery plugin, very simple to use and to add to any php application in just a matter of minutes.


The plugin is called jQuery Countdown, and it can be found here. This is a simple plugin and as their site states, it sets a div or span to show a countdown to/from a given time.

Enough said, this is how you do it:

1. Download jquery and load it to your app server, all you need is the bare minimum, so just get jquery.min.js. Assuming your application is located in /var/www/, create a folder for jquery and place the file there:

cd /var/www/
mkdir jquery
cd jquery
wget http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js

2. Download the jQuery Countdown package to your computer. The package is a zip file, all you need are 2 files from it.
Open it and extract only the 2 files called jquery.countdown.css and jquery.countdown.js to the jquery folder you created on your server (same place where you placed jquery.min.js in the step above).

3. Now create the php page that will display the countdown. jquery.countdown has many different options you can use, these are just a few I have used to create my countdown, please visit their site to see the entire list of options and all different settings you can use:

comingsoon.php

<html>

<head>



    <title>'Coming Soon'</title>

    <script type="text/javascript" src="jquery/jquery.min.js"></script>

    <style type="text/css"> 

	@import "jquery/jquery.countdown.css";

	#defaultCountdown { width: 240px; height: 45px; -moz-border-radius: 5px; border-radius: 5px; margin-left: 80px;} 

    </style> 

    <script type="text/javascript" src="jquery/jquery.countdown.js"></script>





<script type="text/javascript">

$(function () {

// new Date(year, mth - 1, day, hr, min, sec)

// year --> year the event will occur

// mth --> month the event will occur

// day --> day the event will occur

// hr --> hour the event will occur

// min --> min the event will occur

// sec --> sec the event will occur

var newserver = new Date(2012, 8 - 1, 13, 19); 

$('#defaultCountdown').countdown({until: newserver}); 

 

$('#removeCountdown').toggle(function() { 

        $(this).text('Re-attach'); 

        $('#defaultCountdown').countdown('destroy'); 

    }, 

    

    function() { 

        $(this).text('Remove'); 

        $('#defaultCountdown').countdown({until: newserver}); 

    } 

);



});

</script>

</head>



<body>

<div id="mx">	

	

	<?php echo _('<p> Site coming soon.') .'<br>';?>

	<?php echo '</p>'; ?>

	<div id="defaultCountdown"></div>

	<?php echo '<br>'; ?>

</div>





</body>

</html>

That’s it, now browse to your page and you’ll see the countdown. Hopefully this tutorial helped you. Thank you for stopping by and please share with others, after all, code should be free.foscode.com | because code should be free

9 thoughts on “php ajax/jquery countdown

  1. Pingback: 14 Cool jQuery Countdown Scripts | 1 step web design

  2. Pingback: 31 Cool jQuery Count Down Script - Design Freebies

  3. Pingback: 40 jQuery Count Down Timer Plugins

  4. Pingback: 精选8款倒计时插件

  5. Somebody necessarily assist to make seriously articles I might state. That is the first time I frequented your website page and to this point? I surprised with the research you made to make this actual post incredible. Excellent process!

  6. To the last poster, whatever your name may be, thanks for the comments. I too wish my articles would be more visible out there, maybe you can help spread the word by sharing the link with your friends. Thanks for stopping by.

  7. Pingback: 35+ Useful jQuery Countdown Scripts | Mazon Blog

  8. Hi there Dear, are you in fact visiting this website
    daily, if so afterward you will definitely obtain good knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>