[jQuery] Re: IE7 Flicker On DIV slideUp()

[Josh Nathanson]

I wonder if this could be logged as a bug.  I glanced at the jQuery source 
for animate, but it's difficult to figure out exactly where the problem is 
through all the abstraction.

Several people have noticed this behavior in IE, but so far nobody has been 
able to come up with a definitive solution AFAIK.

-- Josh

----- Original Message ----- 
From: "alphadog" <[EMAIL PROTECTED]>
To: "jQuery (English)" <jquery-en@googlegroups.com>
Sent: Monday, March 03, 2008 12:56 PM
Subject: [jQuery] IE7 Flicker On DIV slideUp()




So, I have an issue that I have seen mentioned in other posts but no
solutions work for me for some reason where in FF, slideUp() works
fine, but in IE7, it flickers at the end of the slide. I am using
jquery-1.2.3.pack.js and the DOCTYPE is set to strict ("-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"). I'm not sure how to fix this? (using hide() causes no
flicker, but I'd like to keep the slide.)

Here's the code:

<div id="frameBody">
 <div id="frameBodyContent">
<!-- search criteria -->
<script type='text/javascript'>
var doUp = true;
$(document).ready(function(){
$("#TogglePaneHeader").click(function(){
if (doUp) {
$("#PaneHeaderButton").attr("src", "/wvo_dev/images/plus.gif");
$("#TogglePaneContent").slideUp("fast");
doUp = false;
}
else {
$("#PaneHeaderButton").attr("src", "/wvo_dev/images/minus.gif");
$("#TogglePaneContent").slideDown("fast");
doUp = true;
}
});
});
</script>
       <style>
.paneHeader {
background-color:#1b7433;
font: bold 13px Arial, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon"
icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
</style>
       <div class="paneHeader" id="TogglePaneHeader"><img src="/
wvo_dev/images/minus.gif" alt="Filter" id="PaneHeaderButton"/
&nbsp;FILTER:</div>
       <div id="TogglePaneContent">Your content goes here.</div>
       <br />
       <!-- work area -->
       <div class="paneHeader"id="WorkArea">RESULTS:</div>
 </div>
</div>

Some additional layout CSS:
#frameBody {
position: fixed;
top: 51px;
left: 151px;
right: 0;
bottom: 31px;
overflow: auto;
background: #fff;
}

#frameBodyContent {
margin: 5px;
margin-left: 10px;
border:dotted 1px white;
}

* html body { /*IE hack*/
padding: 55px 0 30px 150px;
}

* html #frameBody { /*IE hack*/
height: 100%;
width: 100%;
}