Header message just like at Stack Overflow

Akshit_73084 0
Viewed 5019

This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.

The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.

header css html javascript
5 Answers

Quick pure JavaScript implementation:

function MessageBar() {
    // CSS styling:
    var css = function(el,s) {
        for (var i in s) {
            el.style[i] = s[i];
        }
        return el;
    },
    // Create the element:
    bar = css(document.createElement('div'), {
        top: 0,
        left: 0,
        position: 'fixed',
        background: 'orange',
        width: '100%',
        padding: '10px',
        textAlign: 'center'
    });
    // Inject it:
    document.body.appendChild(bar);
    // Provide a way to set the message:
    this.setMessage = function(message) {
        // Clear contents:
        while(bar.firstChild) {
            bar.removeChild(bar.firstChild);
        }
        // Append new message:
        bar.appendChild(document.createTextNode(message));
    };
    // Provide a way to toggle visibility:
    this.toggleVisibility = function() {
        bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
    };
}

How to use it:

var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();
JimmyP_216770

Update:

Check out the DEMO

Code Used:

$(function(){
  $('#smsg_link').click(function(){
  showMessage('#9BED87', 'black', 'This is sample success message');
  return false;
});

$('#imsg_link').click(function(){
  showMessage('#FFE16B', 'black', 'This is sample info message');
  return false;
});

$('#emsg_link').click(function(){
  showMessage('#ED869B', 'black', 'This is sample error message');
  return false;
});
});



/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window

params:
  - bgcolor:     The background color for the message box
  - color:     The text color of the message box
  - msg:       The message text
*/
var interval = null;

function showMessage(bgcolor, color, msg)
{
    $('#smsg').remove();
    clearInterval(interval);

    if (!$('#smsg').is(':visible'))
    {
        if (!$('#smsg').length)
        {
            $('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
                position:'fixed',
                top:0,
                left:0,
                width:'98%',
                height:'30px',
                lineHeight:'30px',
                background:bgcolor,
                color:color,
                zIndex:1000,
                padding:'10px',
                fontWeight:'bold',
                fontSize:'18px',
                textAlign:'center',
                opacity:0.8,
                margin:'auto',
                display:'none'
            }).slideDown('show');

            interval = setTimeout(function(){
                $('#smsg').animate({'width':'hide'}, function(){
                    $('#smsg').remove();
                });
            }, 3000);
        }
    }
}

If you want to create your own, check out the slideToggle function of jQuery.

user_1394590

The relevant css would include:

position: fixed;
top: 0;
width: 100%;

More information about position:fixed:

An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

If IE6 support is important to you, you may wish to research workarounds.

user_531620

Here is an alternative method using jQuery which would also slide up/down on show/hide.

Add the following HTML right after the <body> tag in your page:

<div id="msgBox">
    <span id="msgText">My Message</span>           
    <a id="msgCloseButton" href='#'>close</a>
</div>

Add this CSS to your stylesheet

#msgBox {
    padding:10px; 
    background-color:Orange; 
    text-align:center; 
    display:none; 
    font:bold 1.4em Verdana;
}
#msgCloseButton{
    float:right;    
}

And finally here is the javascript to setup the close button and functions to show and hide the message bar:

/* Document Ready */
$(function () {
    SetupNotifications();
});

SetupNotifications = function () {
    //setup close button in msgBox
    $("#msgCloseButton").click(function (e) {
        e.preventDefault();
        CloseMsg();
    });
}

DisplayMsg = function (sMsg) {
    //set the message text
    $("#msgText").text(sMsg);
    //show the message
    $('#msgBox').slideDown();
}

CloseMsg = function () {
    //hide the message
    $('#msgBox').slideUp();
    //clear msg text
    $("#msgtText").val("");
}

To perform a simple test you could try this:

<a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a>
user_408150

Something like this?

$("#bar").slideUp();

However, here I think they fade out first the bar then they bring the main container up, so that'd be something like that:

$("#bar").fadeOut(function(){
    $("#container").animate({"top":"0px"});
});
user_5255300
Related