5

Possible Duplicate:
Notification alert similar to how stackoverflow functions

The notification bar the top, which shows things like ' you earned xyz badge". How is it done? I am trying to create someting similar in my rails app. I use blueprint for my layout, it's a standard single column 950px layout, with everything from the header down to the footer is in a container div.

Community
  • 1
  • 1
badnaam
  • 1,876
  • 4
  • 29
  • 53
  • Are you asking about the back-end or the CSS + JS combination for that effect? – Tudor Sep 16 '10 at 16:05
  • 2
    This question has been asked here a billion times... View the damn source! – Josh Stodola Sep 16 '10 at 16:06
  • possible duplicate of [Notification alert similar to how stackoverflow functions](http://stackoverflow.com/questions/3718125/notification-alert-similar-to-how-stackoverflow-functions). @Josh: It was even asked yesterday! Voted to close. – Andy E Sep 16 '10 at 16:06
  • I have tried the suggestion from the other post and it didn't work for me, thats why i asked. The bahaviour I want is that the notification bar stays over the rest of the content of the page i.e. the main blueprint container, but does not hide it. If the user scrolls they should still be able to see the navbar, header etc, which is part of the blueprint container. The solutions mentioned hide those parts, may be it's someting to do with blueprint. that's why I asked. – badnaam Sep 16 '10 at 16:17
  • also, if I add a top margin to the blueprint container so that it does show even with the notification bar on, once the bar is gone, then there is a white space. I guess I can programatically reset the top-margin to 0, but I am wondering what's the best cross browser solution is. – badnaam Sep 16 '10 at 16:18
  • 1
    @Andy Yeah I saw it yesterday too. If the Search bar on this site was worth anything, perhaps this would happen less frequently. – Josh Stodola Sep 16 '10 at 16:22
  • Another dupe: http://stackoverflow.com/questions/3568928/notification-bar-to-web-page-similar-to-the-so – Josh Stodola Sep 16 '10 at 16:24
  • @badnaam - the reason it hides the content is because the SO notification scrolls with the page (fixed position element). If you want that element to appear above your `#header` and push it down, just insert it above your `#header` when required and make it `position: static;` – Pat Sep 16 '10 at 19:43
  • @Josh in all fairness, the source code has been minimized, so it's pretty hard to figure it out. Looks like StackOverflow creates an *empty* notification box and then uses JavaScript to fill it after the page load. It's also hard to track it because you have to have a notification on the page. If you happen on the site when you don't have notifications, it's hard to get one to appear. :) – Jordan Reiter Jul 07 '11 at 18:23
  • @Jordan In all fairness, you can spend one second [here](http://jsbeautifier.org/) to make code readable, and logout of SO and come back to the site and get your "welcome" notification... Real programmers have some intuition! – Josh Stodola Jul 07 '11 at 18:56
  • @Josh Huh, for some reason I thought that the js was *packed* as well as minimized...guess not. You're right, not really a problem. I wouldn't wish packed js on my worst enemy though. And why would I ever want to log out? :) – Jordan Reiter Jul 08 '11 at 01:00
  • @Jordan Why would you ever want to start a fire by rubbing two sticks together? You wouldn't, unless it was necessary. – Josh Stodola Jul 08 '11 at 02:51

1 Answers1

8

You can do it pretty easily with a fixed position element that has a higher z-index than any other element on your page:

<div id="notification">
    You've earned xyz badge
</div>
<!-- rest of your site's markup -->

And with the following CSS:

#notification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: yellow; 
}

Then it's just a matter of checking on page load if you need to create and display the #notification:

$(window).load(function(){
    if(showNotification){
        $('body').append(
            $('<div id="notification">You\'ve earned xyz badge</div>');
        );
    }
});
Pat
  • 25,237
  • 6
  • 71
  • 68