Cool notification messages with CSS3 & jQuery

by - 85 comments

Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity.

UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful.

Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.

In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.


View demo

Message Types

Bellow is a list with common notification messages:

  • Info
  • Error
  • Warning
  • Success

Info

Its purpose is to inform user regarding a relevant matter.

Error

When an operation has failed, the user must be notified. For example: “The account couldn’t be deleted.” or “Your settings weren’t saved” etc.

Warning

This type of message notify the user of a condition that might cause a problem in the future.

Success

The success message should be displayed after user successfully performs an action.

The HTML

<div class="info message">
		 <h3>FYI, something just happened!</h3>
		 <p>This is just an info notification message.</p>
</div>

<div class="error message">
		 <h3>Ups, an error ocurred</h3>
		 <p>This is just an error notification message.</p>
</div>

<div class="warning message">
		 <h3>Wait, I must warn you!</h3>
		 <p>This is just a warning notification message.</p>
</div>

<div class="success message">
		 <h3>Congrats, you did it!</h3>
		 <p>This is just a success notification message.</p>
</div>

The CSS

.message{
		background-size: 40px 40px;
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);										
		 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 width: 100%;
		 border: 1px solid;
		 color: #fff;
		 padding: 15px;
		 position: fixed;
		 _position: absolute;
		 text-shadow: 0 1px 0 rgba(0,0,0,.5);
		 animation: animate-bg 5s linear infinite;
}

.info{
		 background-color: #4ea5cd;
		 border-color: #3b8eb5;
}

.error{
		 background-color: #de4343;
		 border-color: #c43d3d;
}
		 
.warning{
		 background-color: #eaaf51;
		 border-color: #d99a36;
}

.success{
		 background-color: #61b832;
		 border-color: #55a12c;
}

.message h3{
		 margin: 0 0 5px 0;													 
}

.message p{
		 margin: 0;													 
}

@keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

Note the animate-bg, which animate the background diagonal stripes. Of course, to see this effect, you should use latest Webkit browsers like Chrome/Safari or Mozilla 5+.

The notification messages will be hidden initially. For that we’ll use fixed positioning (absolute value just for IE6 – as there is no position:fixed support).

    position: fixed;
     _position: absolute; /* IE6 only */

The jQuery

Define the messages types using an array:

var myMessages = ['info','warning','error','success'];

The below function hides the notification messages. Messages could have dynamic heights and for that, each message’s height is calculated in order to hide it properly.

	 
function hideAllMessages()
{
		 var messagesHeights = new Array(); // this array will store height for each
	 
		 for (i=0; i<myMessages.length; i++)
		 {
				  messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
				  $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport	  
		 }
}

The showMessage function is called when document ready.

function showMessage(type)
{
	$('.'+ type +'-trigger').click(function(){
		  hideAllMessages();				  
		  $('.'+type).animate({top:"0"}, 500);
	});
}

On page load, first of all we’ll hide all the messages: hideAllMessages(). Then, for each trigger, show the equivalent message:

$(document).ready(function(){
		 
		 // Initially, hide them all
		 hideAllMessages();
		 
		 // Show message
		 for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }
		 
		 // When message is clicked, hide it
		 $('.message').click(function(){			  
				  $(this).animate({top: -$(this).outerHeight()}, 500);
		  });		 
		 
});

View demo

Conclusion

Using CSS3, I think you can find endless possibilities to design notification messages. The above is just a minimal example, with no images (for simplicity’s sake).

But, the design is not everything, as functionality and interactivity have a very important role here.

Updates

  • Added CSS3 animation support for Mozilla 5+ (thanks Magne). I also fixed the proper CSS3 animation (thanks Glukki )
  • CSS3 gradients syntax updated. Now, Safari also renders background stripes.

You might also like:

85 thoughts on “Cool notification messages with CSS3 & jQuery”

  1. There’s a glitch in example animation due to wrong background position shifting number. The result is the jumping background every 5 seconds.
    Fix animate-bg background-position to the value ’40px * N’ ;)

    @-webkit-keyframes animate-bg
    {
    from {
    background-position: 0 0;
    }
    to {
    background-position: -80px 0;
    }
    }

    Reply ↓

  2. You may want to know that support for CSS-animations is available in Firefox starting with (current) version 5. Seeing as you’ve added prefixes for other properties, you may want to do that for animations in Gecko-based browsers as well :)

    Reply ↓

    • Subhsh,
      thanks for your suggestion.

      This can be done calling hideAllMessages(); function using a setTimeout() method.

      Though, auto hiding could be an important drawback. The user may not have time to actually read the notification message.

      Catalin

      Reply ↓

          • Hello, I am not quite sure where to put the timeout function, as it does not seem to work whereever i put it.

            $(document).ready(function(){

            // Initially, hide them all
            hideAllMessages();

            // Show message
            for(var i=0;i<myMessages.length;i++)
            {
            showMessage(myMessages[i]);

            }

            // When message is clicked, hide it
            $('.message').click(function(){
            $(this).animate({top: -$(this).outerHeight()}, 500);
            });

            setTimeout (hideAllMessages(), 3000);
            });

  6. Thanks for posting your demo, I like the technique. How about message blocks that pop up from the bottom of the view port? I’ll take your example and see what I can come up with.

    Thanks again for sharing, this example has been very helpful.

    Reply ↓

    • infocyde, nice to hear you like this technique.

      Of course, messages that pop out from the bottom are another option when it comes to notification messages.

      Thanks for your comment!

      Reply ↓

  7. Great examples! I’m a backend guy and don’t know much about js. How would you go about showing a message after a form submission?

    Reply ↓

    • Thanks Tim!

      If you’re submitting form without page refresh, using jQuery’s Ajax function, then you need to call the showMessage('success'); function within .success() method and showMessage('error'); function within .error() method.

      Reply ↓

        • was there an answer to this…currently i have a form with page refresh that sends

          <?
          $response = $_GET['response'];
          if ($response == '0') {
          echo"

          FYI, something just happened!
          This is just an info notification message.

          “;
          }
          if ($response == ’1′) {
          echo”

          FYI, something just happened!
          This is just an info notification message.

          “;
          }
          ?>

          but whilst it shows the message it is not animated and wont hide on click….any ideas??

          thanks

          Reply ↓

      • Great looking stuff. And works perfect when I can click the links. But I’m trying to show the message based on content of the querystring in the URl. And that part I’ve got covered – can’t figure out the exact syntax to show the message after the page loads though.

        What am I missing?

        The snippet is like this:
        var q = getParam(‘err’);
        if (q == ‘ioe’) {
        showMessage(‘error’);
        }

        Reply ↓

  10. This is awesome!!!

    I was wondering if there is any way to make it push the page down when it appears instead of covering the page? (Something like the hello bar)

    Thanks a million!

    Reply ↓

    • Arun, nice to hear you like it!

      Regarding the “pushing” effect, you’d need to remove fixed and absolute positioning (IE6). Then, in order to “push” content,margin-top property should be used instead top.

      Reply ↓

      • So I made the changes

        ——-
        function showMessage(type)
        {
        $(‘.’+ type +’-notify_trigger’).click(function(){
        hideAllMessages();
        $(‘.’+type).animate({margin-top:”0″}, 500);
        });
        }

        $(document).ready(function(){

        // Initially, hide them all
        //hideAllMessages();

        // Show message
        for(var i=0;i<myMessages.length;i++)
        {
        showMessage(myMessages[i]);
        }

        // When message is clicked, hide it
        $('.notify_message').click(function(){
        $(this).animate({margin-top: -$(this).outerHeight()}, 500);
        });

        });
        ———

        /* Notification Styles */
        .notify_message
        {
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;
        background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
        to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
        transparent 75%, transparent);

        -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
        -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
        width: 100%;
        border: 1px solid;
        color: #fff;
        padding: 15px;
        /*position: fixed;*/
        /*_position: absolute;*/
        text-shadow: 0 1px 0 rgba(0,0,0,.5);
        -webkit-animation: animate-bg 5s linear infinite;
        -moz-animation: animate-bg 5s linear infinite;
        }

        —

        But now, The animation doesnt work and the box doesnt hide :(

        Reply ↓

        • Left this part out ,

          ——–

          var myMessages = ['notify_info','notify_warning','notify_error','notify_success']; // define the messages types
          function hideAllMessages()
          {
          var messagesHeights = new Array(); // this array will store height for each

          for (i=0; i<myMessages.length; i++)
          {
          messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
          $('.' + myMessages[i]).css('margin-top', -messagesHeights[i]); //move element outside viewport
          }
          }
          ——

          Reply ↓

    • Hi Ben, thanks for your comment.

      Regarding your question, I think you need to do something like that:

      <form method="POST" onsubmit="return checkForm(this)" action="">
...
</form>

      where checkForm can display the above notifications if passed validation or if it failed.

      Hope that helps!

      Reply ↓

      • Hi Red!

        Many thanks for your reply!

        My problem been is the actual code for showing the notification once the form has approved validation! (I already have that code shown above implemented!)

        e.g.

        $(‘.success-trigger’).click(function(){
        hideAllMessages();
        $(‘.success’).animate({marginTop:”0″}, 500);
        });

        Doesn’t work which is annoying!

        Reply ↓

          • <?php
            if(isset($_POST['reserve'])){

            $(‘.success-trigger’).click(function(){
            hideAllMessages();
            $(‘.success’).animate({marginTop:”0″}, 500);
            });

            Something as simple as that, they press a button, and the PHP checks if it’s been pressed (or posted as its a form) and then loads the notification!

  27. Hi,

    awesome code :)

    But I’m new to jquery and can’t quite make it work??

    If you look at the site I’ve submitted you’ll see the script working at the top…but it doesn’t disappear when it’s clicked!

    This what I’ve added to the page…

    var myMessages = ['info','warning','error','success'];

    function showMessage(type)
    {
    $(‘.’+ type +’-trigger’).click(function(){
    hideAllMessages();
    $(‘.’+type).animate({top:”0″}, 500);

    // Show message
    for(var i=0;i<myMessages.length;i++)
    {
    showMessage(myMessages[i]);
    }

    // When message is clicked, hide it
    $('.message').click(function(){
    $(this).animate({top: -$(this).outerHeight()}, 500);
    });
    }

    });

    and the css is ‘as is’

    PLease can you tell me where I’m going wrong?

    Cheers :)

    Reply ↓

    • Hi Paul, at the end of your script, you have some unnecessary closing stuff: });

      Use Ctrl+Shift+J (Cmd+Option+J on Mac) to debug JavaScript. ;)

      Hope that helps! Sorry for my late reply…

      Reply ↓

  29. Hi Red Team,

    This is awesome and just what i am looking for. I am fairly new to jquery and some css BUT i want/need this to come up from the footer and not the top, any way of doing it? I tried going through the code as much as my knowledge would permit but no avail.

    Any idea?

    Many thanks!

    Reply ↓

    • Hi,

      that’s quite simple: instead of using the “top” property , just use the “bottom” one in order to do the magic. So, you need to replace the “top” with “bottom” in the jQuery code.

      Hope that helps!

      Reply ↓

  32. Is it possible to use to notifications without using a button; for example, when someone enters a page that the notification automatically shows because that page is called with an url like message.php?notification=error ?!?!

    Reply ↓

  34. Thanks for a great gift!

    I set this up and got it working nicely on my application, I’m just trying to implement the delay spoken above early on in your comments. I’m having great difficulty in getting it to work correctly. I wonder if you could give some help please?

    This is the modified show message function, where I assume the setTimeout() goes:

    function showMessage(type,statusMessage)
    {
    hideAllMessages();

    var messDiv = document.getElementById(type);
    messDiv.innerHTML = statusMessage;

    $(‘.’+type).animate({top:”0″}, 500);
    setTimout(function(){
    $(this).animate({top: -$(this).outerHeight()}, 500);
    hideAllMessages();
    },3000);
    }

    Note that I added a hideAllMessages() at the top of the function too, because if the first message was, “Processing…”, which then got updated to, “Record Added Successfully”, the user would have to click first to remove the Processing message and then again to remove the updated message.

    If you could help me to get the setTimeout working, I would be really pleased! Thanks!

    Reply ↓

  35. Sorry, I figured it out!

    Here’s my final code incase it can help someone else.

    function showMessage(type,statusMessage)
    {
    hideAllMessages();

    var messDiv = document.getElementById(type);
    //alert(messDiv.innerHTML);
    messDiv.innerHTML = statusMessage;

    $(‘.’+type).animate({top:”0″}, 500);

    setTimeout(function(){
    $(this).animate({top: -$(this).outerHeight()}, 500);
    hideAllMessages();
    },6000);
    }

    Many thanks!

    Reply ↓

  36. Great looking notifications.
    I love the look of the notifications, however I changed your javascript to what I hope is easier to reuse.

    The only css change I made, was I added display:none to .message

    My ‘plugin’ version has the ability to:
    set a time delay
    choose top or bottom

    http://jsfiddle.net/imvain2/5Mhby/

    Reply ↓

  37. Hi

    This absolutely awesome, just what i was looking for!

    Just one question..i am using it as sort of a control panel that appears on the bottom right corner when user clicks a CP button. Inside the notification box are some buttons and other functions. Its all great except i want to add a close button on the top right hand side of the box..so instead of the notification box closing when the user clicks anywhere inside the box it closes just when the “X” button is clicked. I need this sort of functionality as i have buttons inside the box that needs to be clicked. How would i go by doing this?

    hope that makes sense!

    I am a jquery beginner.

    Thanks heaps!

    Reply ↓

  41. Hi,
    very nice tutorial and taken use of immediatly. I have a couple of problems.
    One: for some reason the error messages isn’t expanding to full page width.. it expands to about 60% of my 1920×1200 screen.. any ideas?

    Two how could I use it with variables ex.
    I have error and success messages in the url that pickup and save to variables, how can i implement the script so that shows the error returned.. now it shows all the messages when i have this:

    function showMessage(type)
    {
    //$(‘.’+ type +’-trigger’).click(function(){
    if(success == ‘s1′ || success == ‘s2′ || error == ‘e0′ || error == ‘e1′ || error == ‘e2′){
    hideAllMessages();
    $(‘.’+type).animate({top:”0″}, 500);
    }
    //});
    }

    Reply ↓

  42. hi
    tnx for this nice code
    but how can i show one of this popup after a button click
    i mean how can i use this from behind code

    Reply ↓

  44. Hi I want to leave this post in case anyone is used to when running hideAllMessages function () messages are hidden in little by little ::
    hideAllMessages function ()
                         {
                                          messagesHeights var = new Array () / / this array will store height for each

                                          for (i = 0; i <myMessages.length, i + +)
                                          {
                                                           messagesHeights [i] = $ ('.' + MyMessages [i]). outerHeight () / / fill array
                                                           $ ('.' + MyMessages [i]). Animate ({top:-messagesHeights [i]}, 500) / / move element outside viewport
                                          }
                        

    Reply ↓

  45. Thanks for such a wonderful tutorial. I will going to use it in my project. Thanks for posting it.

    I am not good at css. If I want to make notification bar as sticky bar which will remain visible even user scroll the page, then how come I implement it?

    Reply ↓

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>