CODEWITHSUNDEEP
javascripthtmlcssnotification-bar
zacharyliu
zacharyliu

Reputation: 26318

Creating a site top notification bar in header dynamically

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 accommodate it, preferably without needing to use Javascript?

Upvotes: 2

Views: 3751

Answers (4)

codedude
codedude

Reputation: 6549

...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...

Upvotes: 1

Greg
Greg

Reputation: 321864

You could do it with a bit of javascript.

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

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';

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186762

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% ).

Upvotes: 0

user142019
user142019

Reputation:

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<

Upvotes: 3

Related Questions