Header message, as in stack overflow

Question

Header message, as in stack overflow

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

The title bar is fixed and great for attracting visitors. I was wondering if any of you know the code for the code to get the same header.

+44

javascript html css header

Akshit Mar 03 '09 at 6:07

source share

5 answers

James · Answer 1 · 2009-03-03 09:59

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

Sarfraz · Answer 2 · 2011-01-04 05:44

Update:

Check out demo

Used code:

 $(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 jQuery function.

Ken Browning · Answer 3 · 2009-03-03 06:39

Relevant css will include:

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

Additional information position:fixed :

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

If IE6 support is important to you, you can workaround research methods .

TGuimond · Answer 4 · 2010-03-07 20:38

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

Add the following HTML immediately after the <body> on the 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 javascript to customize 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 can try the following:

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

Nabab · Answer 5 · 2011-01-04 05:54

Something like that?

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

However, here I think that they disappear first and then output the main container, so that would be something like this:

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

Header message, as in stack overflow

Update:

Check out demo

More articles: