CODEWITHSUNDEEP
javascripthtmlcssheader
Akshit
Akshit

Reputation: 451

Header message just like at Stack Overflow

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.

Upvotes: 45

Views: 5377

Answers (5)

Sarfraz
Sarfraz

Reputation: 382861

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.

Upvotes: 11

Nabab
Nabab

Reputation: 2654

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"});
});

Upvotes: 1

TGuimond
TGuimond

Reputation: 5497

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>

Upvotes: 3

James
James

Reputation: 112000

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();

Upvotes: 25

Ken Browning
Ken Browning

Reputation: 29101

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.

Upvotes: 4

Related Questions