How to Shake an element with jQuery UI

In WordPress Admin dashboard login form animate with shake effect whenever the user enters wrong details.

This can easily implement using jQuery UI library.

With jQuery UI you can shake an element in specific direction and distance.

Using this you can warn the user when invalid input is entered.

In the demonstration, I am creating a login form and which gets shake when wrong username and password entered.

How to Shake an element with jQuery UI


Contents

  1. Shake Effect
  2. Examples
  3. Conclusion

1. Shake Effect

For shaking the element I am using the shake effect which shakes the element multiple times, in left, right, up, and down direction.

For using this you need to include jQuery UI library on your page. You can get it from there Offical Website.

Syntax –

$(selector).effect( "shake"[, {arguments}]);

Example – 

$("#login").effect("shake");

Arguments –

direction − Set the direction of the effect to horizontally or vertically. It takes left, right, up, and down value.The default value is “left”.

distance − Distance to shake. The default value is 20.

times − Times to shake. The default value is 3.

Example – 

$("#login").effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );

2. Examples

# Example 1

A simple and basic example of the shake effect.

HTML

Creating a Login box.

Completed Code

<!doctype html>
<html>
<head>
 <title>How to Shake an element using jQuery UI</title>
 <link href="style.css" type="text/css" rel="stylesheet">
 <script src="jquery-3.0.0.js" type="text/javascript"></script>
 <script src="jquery-ui.js" type="text/javascript"></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.

Completed 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" );
   }
  }
 });
 
});

Output

Enter incorrect username and password to see the changes.


# Example 2

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 );
 });
 
});

Output

Set direction, time, and distance and click on Shake button to see the changes.


3. Conclusion

You can use this effect to draw user attention to the element or when someone enters the wrong value within the field.

You need to include jQuery UI library on your webpage to use shake effect.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *