All geek questions in one place

How to make this jQuery snippet work in Internet Explorer?

If you ever had time to hate IE, that's it. This code begins with a content field. When the button is pressed, the field should fall and fade.

<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 in Chrome, Safari and Opera. But Internet Explorer? No .

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

+3
source share
2 answers

Since you are missing the tag <head>and the doctype declaration, your page is displayed in Quirks mode. Change it

<html>

to that

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
+5
source

, , IE . , , 0. IE8,

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


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

, . () IE.

+1

Source: https://habr.com/ru/post/1742178/

More articles:


All Articles