Scribd
Upload
30 views3 pages

jQuery Countdown Timer Tutorial

The document provides instructions for creating and using a countdown timer with jQuery. It includes: 1) The jQuery plugin code needed to build the countdown timer functionality. 2) Instructions for creating an HTML page with the necessary script links to implement the countdown timer. 3) An example usage of the countdown timer plugin on a page, setting the start number and callback function.

Uploaded by

TechnoTiger
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
30 views3 pages

jQuery Countdown Timer Tutorial

The document provides instructions for creating and using a countdown timer with jQuery. It includes: 1) The jQuery plugin code needed to build the countdown timer functionality. 2) Instructions for creating an HTML page with the necessary script links to implement the countdown timer. 3) An example usage of the countdown timer plugin on a page, setting the start number and callback function.

Uploaded by

TechnoTiger
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd

CountdownTimer Using Jquery

Hi friends,

In this tutorial I am going tell about how to create and use th countdown Timer using
Jquery.

In one of application the client want to display the count down [Link] that I choose
Jquery and put it in my application.

The original count down timer is get from David walsh

I slightly modify it and give it to you.

First you need to put the Jquery plugin.

/*
Class: countDown
Author: David Walsh
Modified by:Vinoth Kumar.S
Version: 1.0.0
Date: FEB 05 2010
Built For: jQuery 1.2.6
*/

[Link] = function(settings,to,id) {
settings = [Link]({
startFontSize: '36px',
endFontSize: '12px',
duration: 1000,
startNumber: 60,
endNumber: 0,
myid:id,
callBack: function() { }
}, settings);
return [Link](function() {
//alert([Link]);
//where do we start?
if(!to && to != [Link]) { to = [Link]; }
//alert([Link]);
//set the countdown to the starting number
//$(this).text(to).css('fontSize',[Link]);

hours = [Link](to / 60);


minutes = [Link](to % 60);
if (minutes < 10) {
minutes = "0"+minutes;
}
$(this).text(hours + ':' + minutes).css('fontSize',[Link]);
//loopage
var myhour=hours + ':' + minutes;
$.cookie('test',myhour,{expires:7,path:'/'});

$(this).animate({
'fontSize': [Link]
},[Link],'',function() {
if(to > [Link] + 1) {
$(this).css('fontSize',[Link]).text(to - 1).countDown(settings,to - 1);
}
else
{
$.cookie('test',null,{path:'/'});
[Link](this);
}
});

});
};

Then create the Html Page

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"[Link] >
< html xmlns="[Link] >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title > countdowntimer< /title >
< style type="text/css" >
@import "[Link]-1.5.5/css/[Link]";
#defaultCountdown { width: 240px; height: 45px; }
< /style >
< script type="text/javascript" src="jquery/[Link]" > < /script >
< script type="text/javascript" src="jquery/[Link]" > < /script >
< script type="text/javascript" src="jquery/[Link]" > < /script >
< script type="text/javascript" >
$(document).ready(function() {

$('#countdown').countDown({
startNumber: 25,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
$.cookie('test',null,{path:'/'});
//$(this).text(hours + ':' + minutes).css('fontSize',[Link]);
},
id:5
});
});
< /script >
< /head >

< body >

< p style="border:1px;margin:auto 0px;text-align:center;margin-top:250px;" >


< span id="countdown" > < /span >
< /p >

< /body >


< /html >

visit [Link] for more informations.

Please use this and leave the comment to us

You might also like