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.
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);
});
});
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, you might also like:
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;
}
}
Thanks for noticing, I’ll fix that soon!
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 :)
Updates were made, thanks for your valuable feedback!
I think this could be used for Email subscription.Click on an Email icon and the form slides down.Might try it…
Paul, with some modifications, you could use the above also for other purposes. Good luck!
An auto-close after x seconds will be a great help. Please consider adding it.
Subhsh,
thanks for your suggestion.
This can be done calling
hideAllMessages();function using asetTimeout()method.Though, auto hiding could be an important drawback. The user may not have time to actually read the notification message.
Catalin
+1 to autohiding. It could be optional. For example for info messages auto hide is on, for error not.
Mike, good point, I can agree with different hiding behavior for the notification messages.
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);
});
This should work
setTimeout(function(){hideAllMessages()},3000);
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.
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!
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?
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 andshowMessage('error');function within.error()method.Thank you. Yeah, I should have specified there’s a page refresh. :)
I like this one. Works even in IE7
tinny, also it works even in IE6 – but using
absolutepositioning. Nice to hear you like it!Thanks for your work. I’m definitely going to use it on some of my new projects
Really nice, Thanks !
Pate, nice to hear you like it! Thanks for your comment.
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!
Arun, nice to hear you like it!
Regarding the “pushing” effect, you’d need to remove
fixedandabsolutepositioning (IE6). Then, in order to “push” content,margin-topproperty should be used insteadtop.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 :(
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
}
}
——
Arun, check this out:
http://jsfiddle.net/catalinred/fGcY6/
This should do it for you.
Cheers!
That worked, Thanks!
Also, didnt know about jsfiddle, its rad!
Great! Indeed, jsfiddle is a cool tool!
Yes this is cool for me. I dont need to make any change :)
Thanks for share, good luck
This is…. AWESOME!
why not use jquery hide() function?
&(‘.message’).hide()
Markus, the show/hide is made based on animating the CSS
topproperty.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.mh I still think you could use it. height can still vary.
You can try it and you’ll see the reason why it does not work for this example ;)
hi.
mmmmmmmm….
i should use’em somewhere!!!
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
Hi Red! Thanks, this is awesome. What should i do to load a message after page ready? thanks!
Matteo, when document ready, you should remove the click event and just animate the message.
Here’s a quick demo: http://jsfiddle.net/97QmU/
does not wrk properly msg does nt hide when clicked wat to do
Hello,
Is there a specific license for the css/js code?
Thanks,
Greg
Greg, feel free to use the code as you wish. ;)
The notifications are so sleek and intuitive. Thanks Red, for an awesome tutorial.
Jimmy, I’m glad you like them. Thanks for your comment.
Hi Red, fantastic plugin!
One question, How could I get a notification to load once a PHP Form submission is successful.
Many thanks!
Hi Ben, thanks for your comment.
Regarding your question, I think you need to do something like that:
where
checkFormcan display the above notifications if passed validation or if it failed.Hope that helps!
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!
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.
<?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!
Nice work how can i had i icon side the text ?
forgot to mention with text-align:center; set for the message
thanks
Keny, you can use a HTML
imgtag or a CSSbackgroundfor it. Good luck!Be nice to animate the notification closure :) Very sleek!
You can add jNotify, a jquery plugin that do the same thing :)
http://www.myjqueryplugins.com/jNotify
Regards,
Maiki
I’ll definitely take advantage of this tutorial! Thanks a lot for it!
Great tutorial! Would it be possible to add a browser update notifier like the one on http://www.duscatolin.com.br/?
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 :)
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…
Great work. I really like this effect. I just need to find somewhere to use it…
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!
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!
Brilliant! So easy!
Thank you Red Team!
:)