Tuesday, March 1, 2011

jQuery Fadeout leaves small gap.

I'm using the current jQuery to hide fade out a notification div, and then remove it, however when it completes there's an odd gap around the height of a   - meaning that subsequent forms and page elements don't display where they were before the notice appeared.

To recap: the fade out and remove is working perfectly but I'd like the gap left over to vanish as well. It's a minor thing, but it's bothering me.

The jquery:

// Fade out any success divs.
$(".success").fadeOut(6000, function(){
    $(".success").remove();
});

The notification div is being written by PHP on postback, and has the following CSS:

.success {
    background-color: #b3ffb2;
    border: 1px solid green;
}

.box {
    margin: 5px;
    padding: 5px;
}

The div is very simple:

<div class="success box"><p><strong>Success!</strong><br />Done!</p></div>

Edit: The surrounding markup of the page looks like this:

<div id="wrapper">

    <div id="navigation">
        <ul> ... </ul>
    </div>

    <div id="container">
        <div class="success box">
            <p><strong>Sucess!</strong><br />
            Done</p>
        </div>
        // more content
    </div>

</div>

Edit: Using Firebug in FF 3.5.2, I can't see anything being left behind using the inspector. There's just an odd gap. I've also created a screenshot of this phenomena:

odd gap

From stackoverflow
  • Without actually seeing it, I'd presume that it is an artifact of either #container or of // more content. $.remove() literally removes the element from the DOM and forces a redraw, so assuming that it's working (syntax appears fine), it is certainly not a result of .success.

    EvilChookie : Well, at least I have some ideas and inklings about where to go from here. I'll post as I have more success.
    EvilChookie : While I solved the question myself, it was your comment that assisted in solving. Thanks a bunch.
  • Try hide() instead of remove?

    EvilChookie : That didn't do it.
  • I solved it, there was a <br> tag hiding under my notice that was still there after fade out.

    So, in order to hide the first element after the div, I changed my jquery to:

    $(".success").fadeOut(6000, function(){
        $(".success + br").remove();
    });
    

    Which removes the very next item in the dom following the selector. From the jQuery Manual.

0 comments:

Post a Comment