I implemented the code to dislay the bar at the top of the stackoverflow screen: http://stackoverflow.com/questions/659199/how-to-show-popup-message-like-in-stackoverflow
What this does is display the div over top of the div at the top of the page. How can I display the new "bar" div and push the others down? Just like StackOverflow does.
Don't use the "position: fixed" property in css, try "absolute" from: http://www.w3schools.com/css/pr_class_position.asp
Fixed position is relative to your "viewport" (browser window).
Absolute position is relative to your html document.
Set the without knowing the full structure of your html, the simplest is to set the margin-top of the body to the height of your message div, pushing the page content down. Then you should shift it back up. I've done it as a callback to occur after the fade, but if that appears too jumpy you may make it happen before the fade.
$(document).ready(function() {
$("#message").fadeIn("slow",
function() {
$('body').css('margin-top', $(this).height());
}
);
$("#message a.close-notify").click(function() {
$("#message").fadeOut("slow",
function() {
$('body').css('margin-top', 0);
}
);
return false;
});
});
Edit: The immediate reaction to my code below will be to not use the div#removeme tag and instead provide a margin-bottom. However if you are going with position:fixed this won't work as it attaches itself to the window and not the document.
This is what i do:
In my html document:
<div id="removeme">
<br /><br />
</div>
<div id="header"> This is a floating pane! </div>
<div id="content"> Your content goes here... </div>
The CSS for this floating pane is:
#header {
position: fixed;
top: 0px;
left: 0px;
text-align: center;
background-color: #FFE6BF;
height: 30px;
border: 1px solid #FFCFA6;
width: 100%;
}
And then use jquery in the <head> tag:
$(document).ready(function() {
$('#header').click(function() {
$('#header').slideUp('fast');
$('#removeme').remove();
});
});
I have an extra <div> tag with id removeme to push the contents down when the floating pane is visible and i remove it whenever the floating pane is hidden.
you would set the bar's position css property to "fixed" then create a "padding" div to pad the height of the top bar. One more div under this padding div. And there you have it, the rest of your page will scroll, but your bar will stick at the top. If you want everything to move up and down with your bar, use slideUp on both your fixed position div and that padding . They'll both disappear and the rest of the page will scroll up. Vice versa if you want to display the top bar.