Menu
I've been looking for a notification bar like the one on this site that displays at the top notifying a user of changes etc. It should have the ability of being closed. All I can find for jquery is this one
Does anyone have any other recommendations or suggestions?
771
Super easy to build your own. Just make it the first <div> under the <body> tag, and set the css to something like this:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Then on your notifications, simply slide it down:
$('#notify').html('new message').slideDown();
And add a click event to close it and clear out the notification:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Demo: http://jsfiddle.net/AlienWebguy/Azh4b/
If you wanted to really make it like StackOverflow's you'd simply set a cookie when you issue the notification, and then every page load show all notifications which have applicable cookies.
If you want multiple notifications, change #notify to .notify and stack em up. Something like this:
$('.notify').live('click',function() {
$(this).slideUp('fast',function(){$(this).remove();});
});
$(function(){
notify('You have earned the JQuery badge!');
notify('You have earned the Super Awesome badge!');
});
function notify(msg) {
$('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
Demo: http://jsfiddle.net/AlienWebguy/5hjPY/
63
I've actually made something very similar to this for a couple of projects of mine.
There's a JSFiddle demo, which works but it's a straight lift from my personal libs - code that could probably use cleaning and optimising, but it give a good impression of how it works.
The added bonus of my code is that it doesn't show duplicate items - it "pings" the currently existing one. Clicking anywhere on the notification closes it.
The only drawback I can see for this is that it covers up some of the main content, but that's fixable if you put the notifications container at the top of your content with position: static.
Please let me know if there are any specifics you want me to explain; there's rather a lot of code to run through in one answer.
I'll probably write a jQuery plugin that does this at some point, seeing as there's only one example. I'll post it here when I do.
NB. The setInterval() is only used for demonstration purposes. Also, there are different coloured alerts (success, info, warning, error - green, blue, orange and red respectively).
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
