Menu
I implemented the code to dislay the bar at the top of the stackoverflow screen: 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.
800
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.
185
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.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
