Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery, hide a div without disturbing the rest of the page

Consider the page as below (pseudocode)

<header>
    <search>
        <form>
            <input text> <input submit>
        </form>
    </search>
    <menu>
        <ul>
            <li>File</li>
            <li>Edit</li>
            <li>Text</li>
        </ul>
    </menu>
</header>

<content></content>

<footer></footer>

When the page loads, I want the header to show for, say 10 seconds, then fade out over the next couple of seconds. I can accomplish that with

jQuery.fn.delay = function(time, func){
    return this.each(function(){
        setTimeout(func, time);
    });
};

$("header").delay(5000, function() { $(this).fadeOut(2000) });

The problem is, when header fades out, the rest of the page (content, footer) bumps up to take up the place occupied by header. I want header to be sort of like "display: block" in that, its place is never given up.

Then, after header has faded away, I would like to bring it back on mouseOver, and fade out again on mouseOut. I tried the following

$("header").hover(function() { $(this).show("slow"); $(this).hide("slow") });

But, that doesn't seem to do the work. One, the header bounces in and out, and also causes the rest of the page to move up.

How can I accomplish the effect?

like image 516
punkish Avatar asked Jun 12 '11 21:06

punkish


People also ask

How do you hide an element without having to take space on the page?

The following style rule hides an element on a web page: display: none; When you set the value of display to none, the affected element will disappear. This means the element will no longer take up any space on the web page.

How do I hide a specific div?

We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.

How do you hide a div after a few seconds?

Select the div element. Use delay function (setTimeOut(), delay()) to provide the delay to hide() the div element.


2 Answers

.fadeOut() finishes with a display: none;, if you don't want to do that, use .fadeTo() instead (which won't set display at the end), like this:

$("header").delay(5000).fadeTo(2000, 0);

(note this uses the built-in .delay() function)

You can try out a full demo here, with the hover functionality fading and not causing movement as well, like this:

$("header").hover(function() { 
  $(this).fadeTo(600, 1); 
}, function() { 
  $(this).fadeTo(600, 0); 
});
like image 110
Nick Craver Avatar answered Sep 28 '22 03:09

Nick Craver


Add a container around the header, and style it with display:block and a fixed width/height. When you fade out the header, the container will preserve the space the header occupied.

This way you have an element to bind the hover event to, for re-displaying the header after it's faded out. Once hidden, the header will not be able to receive its own hover events, so the container must receive them in its place.

like image 34
meagar Avatar answered Sep 28 '22 01:09

meagar