Is there a way to insert a notification bar at the top of any webpage (similar to the ones here at Stack Overflow) without needing any special code in the page itself? I'm looking for either a snippet of CSS styling or, if necessary, a Javascript example. It doesn't need any special animations or even a close link, but it does need to make room for itself at the top of the page.

EDIT: Read the last part: but it does need to make room for itself at the top of the page. I know how to position an element on the top of a page and also how to make it stay in the window, but what is a reliable way to move the rest of the page down to acmodate it, preferably without needing to use Javascript?

Is there a way to insert a notification bar at the top of any webpage (similar to the ones here at Stack Overflow) without needing any special code in the page itself? I'm looking for either a snippet of CSS styling or, if necessary, a Javascript example. It doesn't need any special animations or even a close link, but it does need to make room for itself at the top of the page.

EDIT: Read the last part: but it does need to make room for itself at the top of the page. I know how to position an element on the top of a page and also how to make it stay in the window, but what is a reliable way to move the rest of the page down to acmodate it, preferably without needing to use Javascript?

• javascript
• html
• css
• notification-bar

Share Improve this question Follow edited Apr 30, 2012 at 14:21 Patrick McElhaney 59.4k4141 gold badges137137 silver badges170170 bronze badges asked Jul 26, 2009 at 13:25 zacharyliuzacharyliu 26.3k44 gold badges2222 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Using a CSS fixed position

#bar
{
    position: fixed;
    top:0px;left:0px;width:100%;
    display:none;
}

make it visible with javascript

if you want room at the top of the page by default, use

visibility: hidden;

instead of

display:none;

by the way, it'll not work in IE6<

You could do it with a bit of javascript.

To guarantee it won't overlap anything would be a little plicated.

This will do for most cases:

var myElm = document.createElement('div');
myElm.appendChild(document.createTextNode('This is a test'));
document.body.insertBefore(myElm, document.body.firstChild);

This would fail if position: absolute was used on the page.

You could get around this like this; by moving anything in the body into a child node:

var myElm = document.createElement('div');
myElm.appendChild(document.createTextNode('This is a test'));

var container = document.createElement('div');
container.style.position = absolute;
container.style.left = '0px';

while (document.body.firstChild)
    container.appendChild(document.body.firstChild);

document.body.appendChild(myElm);
document.body.appendChild(container);
container.style.top = myElm.offsetHeight + 'px';

...and you can always use jquery to make it fadeIn or fadeOut.

example:

$('a').click(function() { $('#bar').fadeIn(); });

the bar would have to be "display:none" in the css so the jquery could fade it in when it wanted to. Also, you'd want to set a timeout for the bar to fade Out after a certain amount of time.

...or something similar...

You could set overflow:hidden on the body element and then rely on absolute positioning for IE6 in addition to position:fixed for modern browsers. Might need to tinker around with the percent ( 99/100% ).