Countdown timer plugin using JQuery

<!–

This plugin help you when your site is under construction or something else and you are not publish your web page but you want that the user who come to your site to notify them that your web site will be seen or publish after a specific time.

I know ther is a lot of plugins like this but creating this by myself was really a fun stuff.

You can modify the css file or startcount.js to whatever you wish. But don’t delete the #spa id from css because i used it in my plugin.

To use the plugin see the example below. In startcount() method you have to send the date that you will publish your web page or something like that . date will be (2012 11 12 12:12:12) or (12 november 2012 12:12:12). And thats all .

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”plugin4.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#main’).startcount(‘2012 11 12 12:12:12’,function(){

//whatever you want do after the countdown end will be here
//You can redirect here to another page
//alert(“Thanks for waiting…”);

window.location=”http://www.kfelahi.wordpress.com/&#8221;;

});

});

</script>
<style type=”text/css”>
#main
{
background-color:#999;
font-family:”Comic Sans MS”, cursive;
font-size:40px;
margin:20px;
text-align:center;
}
#spa
{
font-size:14px;
color:#06F;
}
#heading
{
font-size:30px;
font-family:Georgia, “Times New Roman”, Times, serif;
text-align:center;
color:#7DF9CB;
}
</style>
</head>

<body>
<div id=”heading”>We Will Be Back After</div>
<div id=”main”></div>
</body>
</html>

=================================================

startcount.js

(function($){

$.fn.startcount = function(time,func)
{
var selector = $(this);
var t = Date.parse(time);
function add_zero(val)
{
if(val<10)
val = ‘0’+val;
return val;
}
function sOrNot(s)
{
if(s>1)
r = ‘s’;
else
r = ”;
return r;
}
function count(){
var c_time = $.now();
var rem_sec = Math.floor((t – c_time)/1000);

if(rem_sec <= 0)
{
clearInterval(interval);
func.call(selector);
}

var rem_day = Math.floor(rem_sec/(24*60*60));
var rem_sec = rem_sec – (rem_day*(24*60*60));

var rem_hour = Math.floor(rem_sec/(60*60));
rem_sec = rem_sec – (rem_hour*(60*60));

var rem_min = Math.floor(rem_sec/60);
rem_sec = rem_sec – rem_min*60;

rem_day = add_zero(rem_day)+'<span id=”spa”>Day’+sOrNot(rem_day)+'</span>’;
rem_hour = add_zero(rem_hour)+'<span id=”spa”>Hour’+sOrNot(rem_hour)+'</span>’;
rem_min = add_zero(rem_min)+'<span id=”spa”>Minute’+sOrNot(rem_min)+'</span>’;
rem_sec = add_zero(rem_sec)+'<span id=”spa”>Second’+sOrNot(rem_sec)+'</span>’;

selector.html(rem_day+”  “+rem_hour+”  “+rem_min+”  “+rem_sec);
}
interval = setInterval(count,1000);
}

})(jQuery)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s