ansaurus

Question

Header message just like at Stack Overflow

Answer 1

A:

Look into some sort of Ajax control. Its quite simple, script.aculo.us and jQuery for example can do that out of the box.

zodeus 2009-03-03 06:14:46

Answer 2

+3 A:

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.

Ken Browning 2009-03-03 06:39:51

Answer 3

+12 A:

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

J-P 2009-03-03 09:59:49

Rather than have a toggle after the append line just do this: bar.style.display = message === '' ? 'none' : 'block';Then when you want to get rid of the bar just: myMessageBar.setMessage('');

Paul Hargreaves 2010-01-09 18:47:08

Toggling visibility seems like a much more intuitive API to me; I would expect a blank message to show as a blank message, rather than no bar at all.

Matchu 2010-03-07 21:00:35

Answer 4

A:

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>

TGuimond 2010-03-07 20:38:38

ansaurus

tags:

views:

answers:

Header message just like at Stack Overflow

related questions