Web Developer

Friday, 16 September 2016

fadeIn and fadeOut Method in Jquery

Let us understand with a suitable example:-

fadeIn_fadeOut.html:-

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

<body>
<p>Demonstrating fadeIn functionality.</p>
<button id="btn1">Click to fade in the box</button>
<br><br>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;">
</div><br>

<p>Demonstrating fadeOut functionality.</p>
<button id="btn2">Click to fade out the box</button>
</body>

</html>

fadein_fadeout.js:-

$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn("slow");
});

$("#btn2").click(function(){
$("#div1").fadeOut("slow");
});
});

Screenshots:-

Explanation:-

Here, fadeIn() and fadeOut() methods has been used. fadeIn() method changes the opacity from hidden to visible whereas fadeOut() method changes the opacity from visible to hidden. Both the methods are built-in functions which are used in Jquery.

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.

Thursday, 28 July 2016

Mouse Events in Jquery

Let us explain with an example:-

mouse.html:-

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

<body>
<h3>Mouse Enter Example</h3>
<p id="p1">Move your mouse to this paragraph</p>
<hr/>

<h3>Mouse Leave Example</h3>
<p id="p2">Exit mouse from this paragraph</p>
<hr/>

<h3>Mouse Down Example</h3>
<p id="p3">Mouse Down on this paragraph</p>
<hr/>

<h3>Mouse Up Example</h3>
<p id="p4">Mouse up on this paragraph</p>
</body>

</html>

mouse.js:-

$(document).ready(function(){

$("#p1").mouseenter(function(){

alert("You entered this paragraph");

});

$("#p2").mouseleave(function(){

alert("You just left from this paragraph");

});

$("#p3").mousedown(function(){

alert("Mouse Down on this paragraph");

});

$("#p4").mouseup(function(){

alert("Mouse up on this paragraph");

});

Screenshot:-

Explanation:-

Here, separate paragraphs have been used for all the mouse events functionality in Jquery. <p> tag has been used, declared along with the attribute "id". This "id" value has been called in the different functions of the mouse events. Different functions like "mouseenter", "mouseleave", "mousedown" and "mouseup" has been used in the above example.

Monday, 25 July 2016

dblclick() in Jquery

Let me explain you with a suitable example:-

dblclick.html:-

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

<body>

<p id="p1">Double-Click on this paragraph to hide it</p>

</body>
</html>

dblclick.js:-

$(document).ready(function(){

$("p").dblclick(function(){

$("#p1").hide();

});

Screenshot:-

Explanation:-

When we will double-click the paragraph defined in the page, that paragraph will get hidden. Here, an "id" attribute has been added along with the "p" tag/element, whose value has been called in the jquey function.

Thursday, 21 July 2016

Hide() in Jquery

Let us understand it with a suitable example:-

hide.html:-

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

<h1>Paragraph Example</h1>
<p id="p1">Click the paragraph to hide</p>
<hr>

<h1>Button Example</h1>
<h5 id="btn1">Click button to hide the paragraph</h5>
<button>Hide</button>

</body> </html>

hide.js:-

$(document).ready(function(){
$("p").click(function(){
$("#p1").hide();
});
});

$(document).ready(function(){
$("button").click(function(){
$("#btn1").hide();
});
});

Screenshot:-

Explanations:-

Jquery is a JavaScript library. We need to include its library to use its functionality in webpage. Here, I have used the "hide()" function to hide the paragraph(<p>) tag. I have shown here, simply by clicking on the paragraph as well as by clicking on the button. I have used separate ids attribute to show the above functionality in Jquery.

Sunday, 19 June 2016

Closure in JavaScript

It is one of the important concept, mainly used by the JavaScript developers.

Let me explain it further with a suitable example:-

closure.html:-

<html>

<head>

<body>

</script>

</body>

</html>

app.js:-

function showValue (x, y) {

var value = "The value is ";

function makeSentence () {

return value + x + y;

}

return makeSentence ();

}

console.log(showValue (5, 6));

Output:-

Explanation:-

Here, "showValue()" ia the function name, passed with two parameters - "x" & "y". A variable called "value" has been declared inside it. A function name called "makeSentence()" has been declared, which is the inner function of the outer function - "showValue()". This inner function - "makeSentence" has access to the outer function's("showValue()") variable("value"), including the parameters("x" & "y"). The "value", "x" & "y" has been returned in the inner function, by using "return" keyword. So, the output will be "The value is 56", as "+" operator is used which will concatenate the numbers.