Simple sliding login page..

<!–

used: jquery,css 2,html 4.01

This is a source code for sliding login page.It is not that kind of good as it has to be. I do it i have seen this kind of sliding login system in a web site.So whatever it is.. i will try to  update it next time.

When you click on “open login panel” it will slide down the log in panel and after click on the “close panel” it slideUp the panel ..

–>

Continue reading

Advertisements

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)

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)

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)

Text highlight plugin in jquery

<!–

Hey This is a simple plugin that highlight a your text what you type in the text field within the written text in span tag.

The plugin saved in highlight.js.You can rename it according to your wish.Collect the plugin form the below site.I also collect it from the below site…
http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

–>

<!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=”highlight.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(‘#b’).click(function(){

var a = $(‘#a’).val();
$(‘body’).removeHighlight().highlight(a)
});
/*$(‘#a’).keydown(function(){

$(‘#spa’).removeHighlight();

});*/

});

</script>
<style type=”text/css”>

.highlight { background-color: yellow }
</style>
</head>

<body>
<input type=”text” id=”a” /><input type=”button” id=”b” value=”click here” /><br />

<span id=”spa”>Howdy, myself tanvir.I am studing at Darul Ihsan University completing by BSc.</span>
</body>
</html>

Create my own plugin in JQuery

<!–

Here i create my own plugin which is quite easy to implement. The plugin help to change any elements background-color ,height, width.Where we have to just send the value for background-color , height , width as a parameter consecutively.

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

$(‘#a’).click(function(){

$(‘#a’).button(‘yellow’,100,100);
//alert(‘asdf’);

});
});
</script>
</head>

<body>
<input type=”button” value=”Click” id=”a”/>
</body>
</html>

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

my_plugin.js

(function($){

$.fn.button = function(color,height,width)
{
$(this).css({‘background-color’:color,’height’:height+’px’,’width’:width+’px’});
}

}
)(jQuery);

By kfelahi Posted in JQuery

Simple email validation in JQuery

<!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”>

function validornot(a)
{
//alert(a);
$.post(’email_validation.php’,{mail: a},function(data){

$(‘#spa’).text(data);

});
}
$(document).ready(function(){

$(‘#t’).focusin(function(){

if($(‘#t’).val() === ”)
$(‘#spa’).text(‘Enter a valid email id’);
else{
validornot($(‘#t’).val());
}
//asfd
//alert(‘asdf’);
}).blur(function(){

/*if($(‘#t’).val() === ”)
$(‘#spa’).text(‘Enter a valid email id’);
else*/
$(‘#spa’).text(”);

}).keyup(function(){

validornot($(‘#t’).val());

});

});

</script>
</head>

<body>
<p>Enter Your Email:</p><input type=”text” id=”t” /><span id=”spa”></span>
</body>
</html>

 

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

 

email_validation.php

<?php

$a = $_POST[‘mail’];

//echo $a;
if(!empty($a))
{
if(filter_var($a,FILTER_VALIDATE_EMAIL)=== false)
{
echo “The email id you enter is not valid”;
}
else
{
echo “This is a valid email id”;
}
}
else
echo “please enter an email”;
?>

<!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”>

function validornot(a)
{
//alert(a);
$.post(’email_validation.php’,{mail: a},function(data){

$(‘#spa’).text(data);

});
}
$(document).ready(function(){

$(‘#t’).focusin(function(){

if($(‘#t’).val() === ”)
$(‘#spa’).text(‘Enter a valid email id’);
else{
validornot($(‘#t’).val());
}
//asfd
//alert(‘asdf’);
}).blur(function(){

/*if($(‘#t’).val() === ”)
$(‘#spa’).text(‘Enter a valid email id’);
else*/
$(‘#spa’).text(”);

}).keyup(function(){

validornot($(‘#t’).val());

});

});

</script>
</head>

<body>
<p>Enter Your Email:</p><input type=”text” id=”t” /><span id=”spa”></span>
</body>
</html>

By kfelahi Posted in JQuery

How to use statusCode: in $.ajax() method in JQuery

<!–

In this code we see how to use statusCode 404 that means we will show a message if there is no data found in the given path. There are also some othere statusCode like 200 ‘OK’,403 ‘Forbidden’,400 ‘Bad Request’,408 ‘Request Timeout’,500 ‘Internal server error’. etc

 –>

<!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”>
$(document).ready(function(){

$(‘#b’).click(function(){

var a = $(‘#text’).val();
$.ajax({

type:’post’,
statusCode:{
404: function(){
$(‘#spa’).html(‘No data found’);
}
},
url:’sample.php’,
data:’name=’+a,
success:function(b){

$(‘#spa’).append(b);
//alert(a);
}
});

});

});
</script>
</head>

<body>
<input type=”text” id=”text” /><input type=”button” value=”get” id=”b” />
<div id=”spa”>Name: </div>
</body>
</html>

By kfelahi Posted in JQuery

$.ajax() method example

<!–

Another method to send data to a php page.The systax bother me becuase i don’t run it precisely for that reaseon it show its result currectly in all browser except mozilla !! However i found the reason behind that failure. Don’t worry about what is said about previous method to send data to a php file. That method also will work fine in all brouser. The previous method was $.post() or $.get() work fine just like this method . But many experts recommand this method to use.

–>

<!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”>
$(document).ready(function(){

$(‘#b’).click(function(){

var a = $(‘#text’).val();
$.ajax({

type:’post’,
url:’sample.php’,
data:’name=’+a,
success:function(b){

$(‘#spa’).append(b);
//alert(a);
}
});

});

});
</script>
</head>

<body>
<input type=”text” id=”text” /><input type=”button” value=”get” id=”b” />
<div id=”spa”>Name: </div>
</body>
</html>

By kfelahi Posted in JQuery

Example of .success() and .error() method in $.post() or $.get()

<!–

In this code i include .success() method that notify user if the $.post() operation is success and .error() method to notify if some error take place like if the php file is not valid or faild to find out the php file.
You can test it by changing the name of the php file..

–>
<!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”>
$(document).ready(function(){

$(‘#button’).click(function(){

var val = $(‘#text’).val();
$.post(‘sample.php’,{value: val}).success(function(){

alert(‘success’);

}).error(function(){

alert(‘an error occured’);

});

});

});
</script>
</head>

<body>
<input type=”text” id=”text” /><input type=”button” value=”Send” id=”button”/><br />

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

By kfelahi Posted in JQuery