focus() method

focus() method

The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it).The focus() method triggers the focus event or attaches a function to run when a focus event occurs.

Syntex:

$(selector).focus()

Example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("input").focus(function(){

$("span").css("display", "inline").fadeOut(2500);

});

</script>

<style>

span {

display: none;

}

</style>

</head>

<body>

<input>

<span>Nice to meet you Mr. Nitin chauhan !</span>

<p>Click inside the input field to get focus.</p>

</body>

</html>

Example :2-

<!DOCTYPE html>

<head>

<title>focus() demo</title>

<style>

span {

display: none;

}

</style>

</head>

<body>

<p><input type="text"> <span>Focus starts.. Write something inside input field 1.</span></p>

<p><input type="password"> <span>Focus starts.. Write something inside input field 2.</span></p>

$( "input" ).focus(function() {

$( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );

});

</script>

</body>

</html>

change() method

change() method

The change event occurs when the value of an element has been changed (only works on <input>, <textarea> and <select> elements).The change() method triggers the change event, or attaches a function to run when a change event occurs. This event is limited to <input> elements, <textarea> boxes and <select> elements.

Syntex:

$(selector).change()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("input").change(function(){

        alert("change event fired because The text of input field has been changed.");

    });

});

</script>

</head>

<body>

<input type="text">

<p>Write something in the input field, and then press enter or Tab or click outside the input field.</p>

</body>

</html>

select() method

select() method

The select event occurs when a text is selected (marked) in a text area or a text field. The select() method triggers the select event or attaches a function to run when a select event occurs.

Syntex:

$(selector).select()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("input").select(function(){

        alert("Text selected from textbox !");

    });

});

</script>

</head>

<body>

<input type="text" value="Hello 'Nitin Kumar chauhan'" style="height:30px;width:200px">

<p>Select some text from textbox .</p>

</body>

</html>

Jquery keypress() Method

keypress() method

The keypress() method triggers the keypress event, or attaches a function to run when a keypress event occurs.The keypress event is similar to the keydown event. The event occurs when a button is pressed down.However, the keypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC). Use the keydown() method to also check these keys.

The order of events related to the keypress event:

· keydown - The key is on its way down

· keypress - The key is pressed down

· keyup - The key is released

Syntex:-

$(selector).keypress()

Example :-

<!DOCTYPE html>

<html>

<head>

i = 0;

$(document).ready(function(){

$("input").keypress(function(){

$("span").text(i += 1);

});

</script>

</head>

<body>

Enter something inside textbox: <input type="text">

<p>Keypresses count: <span>0</span></p>

</body>

</html>

Jquery keyup() Method

jQuery keyup method triggers when you release the pressed key. You can attach functions to execute when this event occurs.

The order of events related to the keyup event:

Ø keydown - The key is on its way down

Ø keypress - The key is pressed down

Ø keyup - The key is released

The keyup event occurs when a keyboard key is released.

Syntex:-

$(selector).keyup()

Example :

<!DOCTYPE html>

<html>

<head>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>

$(document).ready(function(){

    $("input").keydown(function(){

        $("input").css("background-color", "blue");

    });

    $("input").keyup(function(){

        $("input").css("background-color", "red");

    });

});

</script>

</head>

<body>

Write something inside textbox: <input type="text">

</body>

</html>

Jquery mouseenter()

The mouseenter event occurs when the mouse pointer is over (enters) the selected element.The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs. So we can say that The mouseenter() method adds an event handler function to an HTML element. This function is executed, when the mouse pointer enters the HTML element.

Syntax:-

$(selector).mouseenter()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>

$(document).ready(function(){

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

       $( "div" ).text( " Mouse Pointer entered on heading" ).show().fadeOut( 4000 );

    });

});

</script>

</head>

<body>

<h1 id="h1">Move Mouse Pointer on this heading </h1>

<div></div>

</body>

</html>

Difference between mousemove, mouseenter and mouseover.

Ø  The mouseover event triggers when the mouse pointer enters the div element, and its child elements.

Ø  The mouseenter event is only triggered when the mouse pointer enters the div element.

Ø  The onmousemove event triggers every time the mouse pointer is moved over the div element.

Example :-

<!DOCTYPE html>

<html>

<head>

<style>

div {

    width: 150px;

    height: 100px;

    border: 1px solid black;

    margin: 10px;

    float: left;

    padding: 30px;

    text-align: center;

    background-color: lightgray;

}

h3 {

    background-color: white;

}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

var x = 0;

var y = 0;

var z = 0;

$(document).ready(function(){

    $("div.over").mouseover(function(){

        $(".over span").text(x += 1);

    });

    $("div.enter").mouseenter(function(){

        $(".enter span").text(y += 1);

    });

    $("div.move").mousemove(function(){

        $(".move span").text(z += 1);

    });

});

</script>

</head>

<body>

<h1>Example of Mouseover , MouseEnter and MouseMove</h1>

<div class="over" style="background-color:red">

<h3>Mouseover event triggered: <span></span></h3>

</div>

<div class="enter" style="background-color:green">

<h3>Mouseenter event triggered: <span></span></h3>

</div>

<div class="move" style="background-color:yellow">

<h3>Mousemove event triggered: <span></span></h3>

</div>

</body>

</html>

Jquery mouseleave() method

The mouseleave event occurs when the mouse pointer leaves the selected element.The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs.

Syntex:-

$(selector).mouseleave()

Example :-

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

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

        $("p").css("background-color", "Green");

    });

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

        $("p").css("background-color", "yellow");

    });

});

</script>

</head>

<body>

<p>Move the mouse pointer over paragraph text</p>

</body>

</html>

Example 2:-

<!DOCTYPE html>

<html>

<body>

<h1 id="demo1">Move Mouse pointer over me</h1>

<script>

document.getElementById("demo1").addEventListener("mouseenter", mouseEnter);

document.getElementById("demo1").addEventListener("mouseleave", mouseLeave);

function mouseEnter() {

    document.getElementById("demo1").style.color = "red";

}

function mouseLeave() {

    document.getElementById("demo1").style.color = "black";

}

</script>

</body>

</html>

hover() method

hover() method

jQuery hover() function fires when the mouse pointer enters and leaves the selected HTML element so we can say that The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. The hover( over, out ) method simulates hovering (moving the mouse on, and off, an object).

Syntax:-

$(selector).hover(inFunction,outFunction)

Example:-

<!doctype html>

<head>

<title>hover Example</title>

<style>

ul {

margin-left: 20px;

color: blue;

}

li {

cursor: default;

}

span {

color: red;

}

</style>

</head>

<body>

<ul>

<li>option 1</li>

<li>Option 2</li>

</ul>

$( "li" ).hover(

function() {

$( this ).append( $( "<span> ***</span>" ) );

}, function() {

$( this ).find( "span:last" ).remove();

}

);

$( "li.fade" ).hover(function() {

$( this ).fadeOut( 100 );

$( this ).fadeIn( 500 );

});

</script>

</body>

</html>

jQuery mousedown() Method

jQuery mousedown() Method

The mousedown event occurs when the left mouse button is pressed down over the selected element.The mousedown() method triggers the mousedown event, or attaches a function to run when a mousedown event occurs.

Syntex:

$(selector).mousedown()

Note: This method is often used together with the mouseup() method.

Example :-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("div").mouseup(function(){

$(this).after("<p style='color:blue;'>Mouse button released.</p>");

});

$("div").mousedown(function(){

$(this).after("<p style='color:pink;'>Mouse button pressed down.</p>");

});

</script>

</head>

<body>

<div style="height:100px">click the mouse button near the text</div>

</body>

</html>

How to add Google Translate to your website

Step 1- Add a div<> element on the layout master page to show the language selection dropdown list.

Step 2- Copy and paste bellow gave script on the master layout page

 <script type="text/javascript">

function googleTranslateElementInit() {

  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

    </script>

Step -3 Run your application/Website and enjoy Google content Translation service on your website

Complete example :-

<!DOCTYPE html>

<body>

<h1>My first Web Page</h1>

<h1>Nitin Chauhan</h1>

<p>Nitin Kumar , Rahul Kumar , Prashant kumar ,…:</p>

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');

}

</script>

<p> Translate the content of this page by selecting a language in the select box.</p>

</body></html>

Validate Email and Mobile by Jquery

function validateEmailOrMobile(emailOrMobile)
{
    var message = "";
    var intRegex = /[0-9 -()+]+$/;
    debugger;
    if (intRegex.test(emailOrMobile)) {        
        if (emailOrMobile.length != 10) {
            message = 'Please enter a valid mobile number.';
            return message;
        }
 
    }
    else {
        var eml = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;        
        if (eml.test(emailOrMobile) == false) {
            message = "Please enter valid email address.";
            return message;
        }
    }
    return message;
}

function IsMobileNo(emailOrMobile)
{
    var message =false;
    var intRegex = /[0-9 -()+]+$/;
    if (intRegex.test(emailOrMobile))
    {
        message= true;
    }
    else
    {    
        message= false;    
    }
    return message;
}