ansaurus

Question

Jquery Internet Explorer compatibility (toggle and animate)

Answer 1

A:

As Nalum says any image less than 400px in height will disappear and be unrecoverable. But this piece of code works in IE 7 and IE 8 for me:

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style>
#logo {
    margin:-55px auto 0 auto;
    cursor:pointer;
}
#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}
</style>
</head>
<body>
<div id="header">
  <div id="about">
    <p>test</p>
    <img id="logo" src="test.bmp" alt="Logo" />
  </div>
</div>
<script language='javascript'>
    $('#logo').toggle(
    function(){
        $('#about').animate({'top': '-400px'},'slow');
    },
    function(){
        $('#about').animate({'top': '0px'},'slow');
    });
</script></body></html>

On thing to note for some reason the script has to be below the html it will influence. I noticed this is true in the examples and when I try to put the script anywhere above the tags they influence it won't work. There are some comments that it doesn't quite work for IE7 but in this example that was not the case for me.

Jack B Nimble 2010-08-26 17:44:44

For it to work above the html you would need to put the javascript in `$(document).ready(function(){.....});`

Nalum 2010-08-27 09:25:43

Answer 2

+1 A:

If you place your code in a $(document).ready() at the bottom of your html page. It reduces a lot of the issues that i have with js in IE.

Like Jack said, its best to put your javascript after the HTML it effects.

<script>
$.ready(function(){ 
    $('#logo').toggle(function() {
        $('#about').animate({'top': '-400px'},'slow');
    }, function() {
        $('#about').animate({'top': '0px'},'slow');
    }); 
});
</script>

SethZanderJensen 2010-08-28 13:11:24

ansaurus

tags:

views:

answers:

Jquery Internet Explorer compatibility (toggle and animate)

related questions