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:

-
Without actually seeing it, I'd presume that it is an artifact of either
#containeror 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