jQuery Error Message Nudging Animation Effect

In this quick post, I’m going to share how to make an animating “nudging” error box. This could be useful in situations where you need to grab the user’s attention and let them know that something went wrong and/or they need to fix something.

You can review the code and example in this fiddle: http://jsfiddle.net/tysweezy/Afs27/33/

HTML

Now let’s get to the code. We’ll start by creating a box element.

<div id="error">
  <h3>Ah heck nah'</h3>

  <p>Something went wrong yo! You better check yo self!</p>

</div>

Inside that error element, you can add whatever text you like. It should contain something useful for end user.

Next, we could add in some buttons in our error message that do some sort of action. Such as fading out, getting the user’s attention, etc.

 <div id="buttons">
     <button id="ignore">Ignore</button>
     <button id="fix">Fix</button>
 </div>

Style

Here is some CSS that I wrote. Feel free to customize this to your heart’s desire.

#box {
   width: 500px;
   height: auto;
   border: 1px solid #993232;
   background: #FFBABA;
   padding: 10px;
   position: absolute;
   -webkit-border-radius: 3px;
   border-radius: 5px;
   font-family: sans-serif;
   font-size: .7em;
   color: #fff;
   z-index:999;
   text-shadow: 1px 1px 1px #777;
}

#buttons {
  float: right;
}

#buttons button {
  border: none;
  background: #993232;
  color: #fff;
  padding: 5px;
  -webkit-border-radius: 3px;
   border-radius: 3px;
}

#buttons button:hover {
  cursor: pointer;
  background: #E54B4B;
}

#buttons button:focus {
  outline: 0;   

}

In the code above, I created a simple (and very plain) red box, styled the buttons and added a simple text-shadow for fun. Below is the end result.

Note: #buttons button:focus {outline: 0; } removes the default blue outline around button when clicked.

jQuery – Nudging Functionality

Now on to the fun stuff and the purpose of this post. In the jQuery code below, we can now create the “nudging” functionality when the “ignore” button is clicked.

$('#ignore').click(function(){ 
  for (var i = 0; i < 5; i++) {
    $('#box')
    .animate({left: -5}, 50)

    .animate( {left: 5}, 50);
  }
});

Our goal here is to “nudge” the box about five times when the button is clicked. That’s why we need to wrap our animation in a for loop. The loop increments the action five times. After the button is clicked, we want to use jQuery’s $.animate() function. Basically what we are doing is shifting the box left to right about 5 pixels each way.

Note: If you have any trouble understanding what a “for loop” is or how to use $.animate(), please leave a comment below. Also, feel free to give suggestions and feedback. It will help me make updates to this post and provide better articles in the future. I also plan to explain this things in detail in the near future.

Just for the fun of it, we will make the error box disappear when the “fix” button is clicked.

$('#fix').click(function (){
  $('#box').fadeOut();
});

I hope this post was useful and helpful to provide some coding inspiration. Again, you can view the code and the result here: http://jsfiddle.net/tysweezy/Afs27/33/

Until next time, cheers!