Category My own plugins in JQuery

Nov 14 2011

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)

Nov 14 2011

A nice title show with mouse move plugin using JQuery

<!–

This plugin will show you a nice mouseover short description of any element of your web page.You can modify it according to your wish.All you have to do just use the showtitle() method that i created like i use(see the example below).
You can change the background color or border or padding etc.

If you use the showtitle() method and however you don’t use any title attribute in the selector tag there will show nothing.

showtitle.js file contains the plugin ….

–>

<!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=”showtitle.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘input[type=”button”]’).showtitle();

});
</script>
<style type=”text/css”>
#title_design
{
background-color:#D3EFF8;
position:absolute;
padding:3px;
height:auto;
width:auto;
border:2px inset #99EACC;
display:none;
}
</style>
</head>

<body>
<input type=”button” value=”Check Out” title=”This is button no. 1″/>
<input type=”button” value=”Check Out” title=”This is button no. 2″/>
</body>
</html>

===================================================
showtitle.js

(function($){

$.fn.showtitle = function(){

var title;
$(this).after(‘<div id=”title_design”></div>’);

$(this).mouseover(function(){

title = $(this).attr(‘title’);
$(this).removeAttr(‘title’);
$(this).mousemove(function(e){

$(‘#title_design’).css({‘top’:e.clientY+10+’px’,’left’:e.clientX+10+’px’});
$(‘#title_design’).text(title).show();

});

}).mouseout(function(){

$(this).attr(‘title’,title);
$(‘#title_design’).hide();
});

}

})(jQuery)

Nov 13 2011

My countdown plugin in JQuery

<!–

Hello, this is a very simple plugin that do some countdown for you.You can send two parameter. First one is the time in seconds where the countdown start and second is a callback function that after complete the countdown what you want to do written in here.
As you can see i create a pop up box to notify that the countdown is just end.So alert will be shown to user after the countdown comes to an end.

–>

<!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=”plugin2.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#spa’).countdown(10,function(){

alert(‘End of countdown!’);
});

});
</script>
</head>

<body>
<span id=”spa”></span>
</body>
</html>

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

plugin2.js

(function($){

$.fn.countdown = function(time,func)
{

start = time;
function count()
{
$(‘#spa’).text(start);
start -=1;
if(start == 0){
clearInterval(time_interval);
func.call(this);
}
}
time_interval = setInterval(count,1000);

}

})(jQuery)