In the WordPress Admin dashboard login form, the login field animates with a shake effect whenever the user enters incorrect details. This feature can be easily implemented using the jQuery UI library.
With jQuery UI, you can apply a shake effect to an element, specifying the direction and distance of the shake.
This functionality serves to alert users when invalid input is entered.
In the demonstration, a login form is created, and it shakes when an incorrect username and password are entered.
Table of Content
1. jQuery UI Shake Effect
To apply the shake effect to an element, I utilize the shake effect, which shakes the element multiple times in various directions: left, right, up, and down.
To implement this functionality, you’ll need to include the jQuery UI library on your webpage. You can obtain it from their Official Website.
Syntax –
$(selector).effect( "shake"[, {arguments}]);
Example –
$("#login").effect("shake");
Here are the available arguments:
- direction: Specifies the direction of the effect, either horizontally or vertically. It can be set to left, right, up, or down. The default value is “left”.
- distance: Determines the distance to shake. The default value is 20.
- times: Specifies the number of times to shake. The default value is 3.
Example –
$("#login").effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );
In this example, the #login element shakes upwards four times with a distance of 10 pixels, and the effect lasts for 1000 milliseconds.
2. Examples of using ‘shake’ effect
# Example 1 – Shake Login Page
A simple and basic example of the shake effect.
HTML
Creating a Login box.
Full Code
<!doctype html>
<html>
<head>
<title>How to Shake an element using jQuery UI</title>
<link href="style.css" type="text/css" rel="stylesheet">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<span id='response'></span>
<div id='login'>
<table width='100%'>
<tr>
<td colspan='2'><h2>LOGIN</h2></td>
</tr>
<tr>
<td>
<input type='text' placeholder='Username' id='txt_uname'>
</td>
</tr>
<tr>
<td>
<input type='password' placeholder='Password' id='txt_pwd'>
</td>
</tr>
<tr>
<td>
<input type='button' id='but_login' value='Login'>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
jQuery
Shake the login box when the user enters the wrong username and password using shake effect.
Full Code
$(document).ready(function() {
$("#but_login").click(function(){
var uname = $("#txt_uname").val().trim();
var password = $("#txt_pwd").val().trim();
// Check user
if(uname != '' && password != ''){
if(uname == 'makitweb' && password == '1234'){
$("#response").hide();
$("#response").text("Correct");
}else{
$("#response").show();
$("#response").text("Incorrect username and password");
// shake effect
$( "#login" ).effect( "shake" );
}
}
});
});
# Example 2 – Shake Effect with arguments
In the second example, using it with arguments.
HTML
<div>
<select id='direction'>
<option value='left' selected>Left</option>
<option value='right'>Right</option>
<option value='up'>Up</option>
<option value='down'>Down</option>
</select>
<input type='text' value='5' id='times' placeholder='Tine'>
<select id='distance'>
<option value='10' selected>10</option>
<option value='20'>20</option>
<option value='30'>30</option>
<option value='40'>40</option>
<option value='50'>50</option>
</select>
<input type='button' value='Shake' id='shake'>
</div>
<div id='box'></div>
jQuery
Use the drop-down and textbox element values to define options in effect() method when the button gets clicked.
$(document).ready(function(){
$("#shake").click(function(){
var direction = $("#direction").val();
var times = $("#times").val();
if(times == ""){
times = 0;
}
var distance = $("#distance").val();
// Using with arguments
$("#box").effect( "shake", {
direction: direction,
times: times,
distance: distance
}, 1000 );
});
});
3. Conclusion
This effect proves useful for drawing user attention to a specific element, especially in scenarios where someone enters an incorrect value within a field.
Remember, to make use of the shake effect, ensure you include the jQuery UI library on your webpage.
If you found this tutorial helpful then don't forget to share.