views:

1066

answers:

2

If there was ever a time to hate IE, this is it. This code begins with a box with content. When the button is clicked, the box is supposed to drop down and fade-in.

<html>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript'>

function Test()
{
  var item_height = $('#test').height();
  $('#test').height(0);
  $('#test').css('opacity','0');

  $('#test').animate({ height: item_height, opacity: '1' },400);
}

</script>
<body>
<!-- The div below holds the sample content -->
<div id="test" style='border: 1px solid black;'>
  Content<br>
  Content<br>
  Content<br>
  Content<br>
  Content
</div>
<!-- The button to test the animation -->
<br><br>
<div style='position: absolute; top: 150px; left: 10px;'>
  <button onclick='Test();'>Test</button>
</div>
</body>
</html>

This very simple example works on Chrome, Safari, and Opera. But Internet Explorer? No.

How can I (if it's even possible) fix this so that it works in IE?

+1  A: 

I assume what you mean is that in IE, the item's height won't change. The element's height doesn't seem to get set to 0 properly. It works in my IE8 when I change

$('#test').height(0);

to

 $('#test').height(1);

I don't know why this is. The documentation on height() does not mention any IE specific quirks.

Pekka
Thanks. Setting the height to 1 does indeed fix the problem. I should probably comment on this in the jQuery docs.
George Edison
its interesting that .height(0) doesnt work in Quirks Mode
Yisroel
Ya, that is quite strange.
George Edison
+4  A: 

Because you are missing the <head> tag and doctype declaration, your page is being rendered in Quirks Mode. Change this

<html>

to this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
Yisroel
That works too... heh-heh... Now I better delete the comment I made over on the jQuery docs.
George Edison
Uh-oh. It won't let me. If anyone from the jQuery docs reads this - I am sorry: I can't figure out how to delete comments there.
George Edison