Best ways to display notifications with jQuery

Question

I have a form which is a simple CRUD.

I am trying to display a cool looking success message when user enters or deletes a record. I've seen this a lot around the web.

I am very new to jquery. does anyone know any examples that would show how to do this?

Basically a div that would slowly dim out.

Answer 1

Perhaps you're looking for something like this or a straight fade like this. There's a few effects to choose from.

Answer 2

Your question is a little vague as a "cool looking success message" is not much to go with.

If you are interested, however, through answering questions here I have replicated the functionality of two of Stackoverflow's "notification" features that people seem to enjoy: the banner at the top of the page that comes up when you get a new badge, etc. and the red boxes around the site whenever something goes wrong with an action. I've used techniques similar to these to show success messages in my applications and my clients have loved them.

• To show the top banners - demo
• To show the red boxes - demo

The examples are very simple, as all it is doing is showing a DIV somewhere in the document and fading it in and out depending on the situation. That's all you really need to get started.

In addition to this, if you are a Mac fan (and even if you're not) there is the jQuery Growl plugin which is based on the OS X notification system. I am also a big fan of using the BeautyTips plugin to show messages near an element, as the bubbles are very nice and easy to style.

Answer 3

This should work:

function showSnazzySuccessMessage(text)
{
    if($("#successMessage").length < 1)
    {
        //If the message div doesn't exist, create it
        $("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
    }
    else
    {
        //Else, update the text
        $("#successMessage").html(text);
    }
    //Fade message in
    $("#successMessage").show('slow');
    //Fade message out in 5 seconds
    setTimeout('$("#successMessage").hide("slow")',5000);
}

You'll have to play with the style to get it to look the way you want, but you get the idea.

Answer 4

Just throw in a new absolutely positioned div and use the fadeOut-function to animate it's opacity with a slow animation.

Something like this:

var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);

Answer 5

I really like jGrowl. It's very unobtrusive as the messages appear in the left corner and the user can continue to do whatever he's doing, but he does get feedback from the system. And it also looks very fancy :).