Cool notification messages with CSS3 & jQuery

July 5, 2011 by Catalin Rosu - 84 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.

If you enjoyed this article, get updates via RSS or email (it's free).

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

GLuKKi on July 5, 2011 at 16:35 said:

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 ↓
- Red on July 5, 2011 at 17:19 said:
  
  Thanks for noticing, I’ll fix that soon!
  Reply ↓
Magne Andersson on July 5, 2011 at 19:37 said:

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 ↓
Red on July 5, 2011 at 21:26 said:

Updates were made, thanks for your valuable feedback!
Reply ↓
Paul Crowe on July 5, 2011 at 21:28 said:

I think this could be used for Email subscription.Click on an Email icon and the form slides down.Might try it…
Reply ↓
- Red on July 5, 2011 at 23:31 said:
  
  Paul, with some modifications, you could use the above also for other purposes. Good luck!
  Reply ↓
Subhsh on July 6, 2011 at 07:26 said:

An auto-close after x seconds will be a great help. Please consider adding it.
Reply ↓
- Red on July 6, 2011 at 10:14 said:
  
  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 ↓
  - Mike Chaliy on July 14, 2011 at 14:03 said:
    
    +1 to autohiding. It could be optional. For example for info messages auto hide is on, for error not.
    Reply ↓
    - Red on July 14, 2011 at 14:13 said:
      
      Mike, good point, I can agree with different hiding behavior for the notification messages.
      Reply ↓
      - Ash on August 1, 2011 at 17:45 said:
        
        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);
        });
      - Dan on August 10, 2011 at 21:46 said:
        
        This should work
        setTimeout(function(){hideAllMessages()},3000);
      - Nathan on August 5, 2012 at 21:53 said:
        
        Anyway to animate the timeout as if it had just been clicked?
infocyde on July 8, 2011 at 19:24 said:

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 ↓
- Red on July 9, 2011 at 09:35 said:
  
  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 ↓
Tim on July 9, 2011 at 02:53 said:

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 ↓
- Red on July 9, 2011 at 09:56 said:
  
  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 ↓
  - Tim on July 9, 2011 at 17:04 said:
    
    Thank you. Yeah, I should have specified there’s a page refresh. :)
    Reply ↓
    - craig on June 5, 2012 at 08:49 said:
      
      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 ↓
  - J. R. Odden on April 15, 2013 at 00:10 said:
    
    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 ↓
tinny on July 15, 2011 at 17:52 said:

I like this one. Works even in IE7
Reply ↓
- Red on July 15, 2011 at 22:57 said:
  
  tinny, also it works even in IE6 – but using absolute positioning. Nice to hear you like it!
  Reply ↓
  - tinny on July 16, 2011 at 18:07 said:
    
    Thanks for your work. I’m definitely going to use it on some of my new projects
    Reply ↓
Paté on July 20, 2011 at 09:49 said:

Really nice, Thanks !
Reply ↓
- Red on July 20, 2011 at 10:01 said:
  
  Pate, nice to hear you like it! Thanks for your comment.
  Reply ↓
Arun on July 25, 2011 at 02:47 said:

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 ↓
- Red on July 26, 2011 at 00:06 said:
  
  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 ↓
  - Arun on July 26, 2011 at 00:20 said:
    
    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 ↓
    - Arun on July 26, 2011 at 00:23 said:
      
      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 ↓
Red on July 26, 2011 at 00:35 said:

Arun, check this out:
http://jsfiddle.net/catalinred/fGcY6/
This should do it for you.
Cheers!
Reply ↓
- Arun on July 26, 2011 at 01:27 said:
  
  That worked, Thanks!
  Also, didnt know about jsfiddle, its rad!
  Reply ↓
  - Red on July 26, 2011 at 10:49 said:
    
    Great! Indeed, jsfiddle is a cool tool!
    Reply ↓
shipbuysale on August 22, 2011 at 18:10 said:

Yes this is cool for me. I dont need to make any change :)
Thanks for share, good luck
Reply ↓
Francisc on September 6, 2011 at 21:03 said:

This is…. AWESOME!
Reply ↓
Markus on September 8, 2011 at 17:08 said:

why not use jquery hide() function?
&(‘.message’).hide()
Reply ↓
- Red on September 8, 2011 at 17:16 said:
  
  Markus, the show/hide is made based on animating the CSS top property.
  So, using the jQuery .hide() function would not fit for this example.
  In this case, hideAllMessages() function hides all the messages whose height can vary.
  Reply ↓
  - Markus on September 8, 2011 at 17:19 said:
    
    mh I still think you could use it. height can still vary.
    Reply ↓
    - Red on September 8, 2011 at 17:23 said:
      
      You can try it and you’ll see the reason why it does not work for this example ;)
      Reply ↓
mei1i on September 11, 2011 at 00:24 said:

hi.
mmmmmmmm….
i should use’em somewhere!!!
Reply ↓
jay on September 19, 2011 at 10:06 said:

Hi! Nice tutorial. Can someone help me integrate this with this Jquery form: http://www.9lessons.info/2011/09/submit-form-without-refreshing-page.html
Thank you
Reply ↓
Matteo on October 4, 2011 at 18:19 said:

Hi Red! Thanks, this is awesome. What should i do to load a message after page ready? thanks!
Reply ↓
- Red on October 4, 2011 at 19:36 said:
  
  Matteo, when document ready, you should remove the click event and just animate the message.
  Here’s a quick demo: http://jsfiddle.net/97QmU/
  Reply ↓
  - shivam on October 12, 2011 at 15:56 said:
    
    does not wrk properly msg does nt hide when clicked wat to do
    Reply ↓
greggles on October 6, 2011 at 03:02 said:

Hello,
Is there a specific license for the css/js code?
Thanks,
Greg
Reply ↓
- Red on October 6, 2011 at 09:26 said:
  
  Greg, feel free to use the code as you wish. ;)
  Reply ↓
Jimmy X on October 28, 2011 at 07:28 said:

The notifications are so sleek and intuitive. Thanks Red, for an awesome tutorial.
Reply ↓
- Red on October 28, 2011 at 09:11 said:
  
  Jimmy, I’m glad you like them. Thanks for your comment.
  Reply ↓
Ben on November 27, 2011 at 16:35 said:

Hi Red, fantastic plugin!
One question, How could I get a notification to load once a PHP Form submission is successful.
Many thanks!
Reply ↓
- Red on November 27, 2011 at 21:34 said:
  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 ↓
  - Ben on November 27, 2011 at 22:33 said:
    
    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 ↓
    - Red on November 27, 2011 at 22:40 said:
      
      Hm, I’m not sure what to say exactly. Perhaps you can send me an email (use the contact form) with a fully working demo link.
      Reply ↓
      - Ben on November 27, 2011 at 22:42 said:
        
        <?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!
keny on December 8, 2011 at 18:33 said:

Nice work how can i had i icon side the text ?
Reply ↓
keny on December 8, 2011 at 18:34 said:

forgot to mention with text-align:center; set for the message
thanks
Reply ↓
- Red on December 8, 2011 at 21:17 said:
  
  Keny, you can use a HTML img tag or a CSS background for it. Good luck!
  Reply ↓
Barton on December 9, 2011 at 14:02 said:

Be nice to animate the notification closure :) Very sleek!
Reply ↓
Maiki on December 15, 2011 at 17:16 said:

You can add jNotify, a jquery plugin that do the same thing :)
http://www.myjqueryplugins.com/jNotify
Regards,
Maiki
Reply ↓
спортни стоки on January 2, 2012 at 09:19 said:

I’ll definitely take advantage of this tutorial! Thanks a lot for it!
Reply ↓
Mark on February 5, 2012 at 20:06 said:

Great tutorial! Would it be possible to add a browser update notifier like the one on http://www.duscatolin.com.br/?
Reply ↓
Paul Varney on March 15, 2012 at 03:14 said:

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 ↓
- Red on March 31, 2012 at 15:23 said:
  
  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 ↓
Mark on March 22, 2012 at 17:50 said:

Great work. I really like this effect. I just need to find somewhere to use it…
Reply ↓
HughDunnit on April 17, 2012 at 09:18 said:

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 ↓
- Red on April 17, 2012 at 09:25 said:
  
  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 ↓
HughDunnit on April 17, 2012 at 09:35 said:

Brilliant! So easy!
Thank you Red Team!
:)
Reply ↓
Rahul on May 29, 2012 at 14:40 said:

Really Cool….
Reply ↓
Stefan on June 3, 2012 at 13:54 said:

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 ↓
- Catalin Rosu on June 3, 2012 at 22:17 said:
  
  Stefan, I actually made something with a similar behavior here.
  Hope that helps!
  Reply ↓
  - Stefan on August 5, 2012 at 09:19 said:
    
    Still can’t seem to get it to work…. could you help me out Catalin?
    Reply ↓
Luis on June 7, 2012 at 01:14 said:

Awsome post!
Reply ↓
Peter Snow on July 8, 2012 at 13:50 said:

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 ↓
Peter Snow on July 8, 2012 at 17:22 said:

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 ↓
Ryan on September 29, 2012 at 05:24 said:

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 ↓
Andrew Reynolds on October 4, 2012 at 05:29 said:

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 ↓
Customizetoyou on November 14, 2012 at 16:46 said:

Thanks for this tips,
i have extended the code :-)
Support hide on click
Support Icon on left
http://jsfiddle.net/ufTVP/
Mark
Reply ↓
- Catalin Rosu on November 22, 2012 at 11:27 said:
  
  That’s very nice ;)
  Reply ↓
codingforever99 on January 29, 2013 at 18:42 said:

Thanks for posting this very useful article.
Reply ↓
Przemek on January 30, 2013 at 21:22 said:

Absolutely great article ! I Hope You don’t mind if I will use Your code in my asp.net mvc project !
Reply ↓
Toby on February 5, 2013 at 01:04 said:

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 ↓
HellisH on February 19, 2013 at 17:42 said:

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 ↓
santosh on March 4, 2013 at 16:08 said:

How can I call the messages on page load depending on the value of a variable. I am using php
Reply ↓
- santosh on March 5, 2013 at 13:45 said:
  
  The answer is here. Thanks for the great plugin Red
  http://stackoverflow.com/questions/15205854/run-javascript-on-page-load/15207569#15207569
  Reply ↓
Segundo Ibarra on May 3, 2013 at 23:30 said:

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 ↓
Hiral on May 17, 2013 at 23:41 said:

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 ↓