Geek Answers Handbook

How can I display the “first time here” panel, such as SO, and push other DIVs down?

I implemented the code to lay out the bar at the top of the stackoverflow screen: https://stackoverflow.com/a/464677/

This means that the div is located above the top of the div at the top of the page. How can I display the new div "bar" and click the rest? Just like StackOverflow.

+6
jquery css
source share
4 answers

Edit: The immediate reaction to my code below will be to not use the div#removeme and provide a margin-bottom instead. However, if you are going with position:fixed , this will not work, since it is attached to the window, not to 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>

CSS for this floating panel:

  #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> :

 $(document).ready(function() { $('#header').click(function() { $('#header').slideUp('fast'); $('#removeme').remove(); }); });

I have an extra <div> with id removeme to push the content down when the floating panel is visible, and I delete it whenever the floating panel is hidden.

+1
source share

Do not use the "position: fixed" property in css, try the "absolute" from: http://www.w3schools.com/css/pr_class_position.asp

A fixed position refers to your “viewport” (browser window).

Absolute position relative to your html document.

+2
source share

Not knowing the full structure of your html, the easiest way is to set the upper edge of the body to the height of your message div by pushing the contents of the page down. Then you have to move it back. I did it as a callback that should happen after the disappearance, but if it seems too nervous, you can do it before the disappearance.

 $(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; }); });
0
source share

you must set the css property of the bar position to "fixed" then create a "padding" div to fill the height of the top bar. Another div under this add-on div. And there you have it, the rest of your page will scroll, but your bar will stick to the top. If you want everything to move up and down using your bar, use slideUp both in the fixed position of the div and in this add-on. They will both disappear and the rest of the page will scroll up. And vice versa, if you want to display the top panel.

0
source share

More articles:


All Articles