Web Developer: August 2016

Saturday, 13 August 2016

Hide & Show with effects in Jquery

Let us explain with an example:-

hide_show.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/hide_show.js"></script>
</head>
<body>
<h4>Click on Hide button and then on Show button.</h4>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
</body>

</html>

hide_show.js:-

$(document).ready(function(){
$("#btn1").click(function(){
$("h4").hide(1000);
});
$("#btn2").click(function(){
$("h4").show(1000);
});

});

Screenshot:-

Explanation:-

Here, in the "hide" function, "1000" as a parameter is passed. So, when we click on the "hide" button, it will hide the content within "1000 ms". Similarly, in the case of "show" function.

Focus & Blur Effect in Jquery

Let us explain with a suitable example:-

effect.html:-

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/effect.js"></script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="email" name="email">

</body>

</html>

effect.js:-

$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","lightpink");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

});

Screenshots:-

Explanation:-

Here, "focus" and "blur" function has been used. When we will click on the textboxes, its color will be "lightpink", i.e, on focus and when we move to another textbox, it will change to "white" color, i.e, on blur functionality.