Home/ Questions/Q 6574637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:17:11+00:00

I’ve been looking for a notification bar like the one on this site that

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0