Shake Your Message Box Using jQuery UI

4Dec/09Off

Shake Your Message Box Using jQuery UI

As a web developer, I shamefully admit that I am pretty late into adopting jQuery in my projects. I've used Prototype, Scriptaculous and ExtJS before but never jQuery. Recently, when I was assigned to a new project, I had a chance to utilize jQuery and a bunch of great plugins.

Today I want to share with you something that I used in the project—a message box that shake to grab user's attention, usually when error has occurred.

So this is the HTML markup. Notice that I use DIV element with error-message as CSS class, this for the styling which I will add later.

<div class="error-message">Click here to see me shake.</div>

It's time to add the shake effect. The effect will be seen when the page is loaded but as you can see from the code below, I also add the code to make it shake on click event.

function shake() {
    $('.error-message').effect('shake', {times:3}, 50);
}

$(document).ready(function () {
    shake();

    $('.error-message').click(function() {
        shake();
    });
});

Since I use this is for showing error message, I want it to be in red and big hence the code below, but you can style it in any way you like. Rounded corners¹ was added to make it more appealing.

div.error-message {
    font-size: 140%;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    padding: 0.7em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    width: 90%;
    border:solid 1px #CC0000;
    background:#F7CBCA;
    color:#CC0000;
}