focusein and focuseout function in jQuery

focusein and focuseout function in jQuery:

html file:

<html>

<head>

<meta charset="UTF-8">

<title></title>

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

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

<style type="text/css">

.color

{

background:#eee;

}

</style>

</head>

<body>

Username <input type="text" name="" id="username" /><span class="user"></span> </br>

Password <input type="password" name="" id="password" /><span class="pass"></span></br>

</body>

</html>

_________________________________________________________________________

jQuery(.js) file:

$(document).ready(function(){

$(':input').focusin(function(){

$(this).addClass('color');

});

$(':input').focusout(function(){

$(this).removeClass('color');

});

$('#username').focusin(function(){

$('.user').text('Enter username');

});

$('#username').focusout(function(){

$('.user').text('');

});

$('#password').focusin(function(){

$('.pass').text('Enter password');

});

$('#password').focusout(function(){

$('.pass').text('');

});

});

mouseover and mouseout function in jQuery

mouseover and mouseout function in jQuery

html file:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

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

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

<style type="text/css">

.box

{

background:green;

width:250px;

height:100px;

display:none;

}

</style>

</head>

<body>

<input type="button" value="please put mouse over me.." id="show" /></br>

<div class="box"></div>

</body>

</html>

_____________________________________________________________________________

jQuery(.js) file:

$(document).ready(function(){

$('#show').mouseover(function(){

$('#show').val('the mouse is put is out...');

$('.box').show(1000);

});

$('#show').mouseout(function(){

$('#show').val('please put mouse over me..');

$('.box').hide(1000);

});

});

How to download jQuery and use it in html document

How to download jQuery and use it in html document

hide function on mouseover and mouseout

hide function on mouseover and mouseout

html file:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

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

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

<style type="text/css">

.first

{

width:300px;

height:200px;

background:red;

}

</style>

</head>

<body>

<input type="button" value="Hide button" id="hide" />

<div class="first"></div>

</body>

</html>

____________________________________________________________________________

jQuery (.js) file:

$(document).ready(function(){

$('#hide').mouseover(function(){

$('.first').slideToggle(4000);

});

});

fade toggle function in jQuery

fade toggle function in jQuery:

html file:

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

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

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

<style type="text/css">

.first

{

width:300px;

height:200px;

background:red;

display:none;

}

</style>

</head>

<body>

<input type="button" value="Toggle Button" id="toggle" />

<div class="first"></div>

</body>

</html>

___________________________________________________________________________

jquery(.js) file:

$(document).ready(function(){

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

$('.first').fadeToggle();

});

});

Password Strength Checker

Password Strength Checker:

html file:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="password_strength_check.js"></script>
<style type="text/css">
.red
{
color:white;
background:red;
padding: 0px 10px;
}
.orange
{
color:white;
background:orange;
padding: 0px 10px;
}
.green
{
color:white;
background:green;
padding: 0px 10px;
}
</style>
</head>
<body>
Passoword <input type="password" name="" id="status"/> <span class="first"> </span>
</body>
</html>
_________________________________________________________________________________

js file:

$(document).ready(function(){

$('#status').keyup(function(){

var len - $('#status').val().length;

if(len<=4)

{

$('.first').text('weak');

$('.first').addClass('red');

}

else if(len<=8)

{

$('.first').text('Good');

$('.first').addClass('orange');

}

else

{

$('.first').text('Strong');

$('.first').addClass('green');

}

});

});

jQuery fadeOut function

jQuery fadeOut function:

html file:

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeout.js"></script>
<style type="text/css">
.first
{
width:300px;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<input type="button" value="fadein" id="fadein"  />
<input type="button" value="fadeout" id="fadeout"/>
<div class="first">Shahnawaz Akhtar</div>

</body>
</html>
...................................................................................................................................................................
js file:

$(document).ready(function(){
$('#fadein').click(function(){
$('.first').fadeIn(2000);
});
$('#fadeout').click(function(){
$('.first').fadeOut(2000);
});

});