views:

78

answers:

2

Why this small piece of jQuery code is not working on Internet Explorer? IT works fine in all the Webkit browsers.

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

CSS:

#logo {
    margin:-55px auto 0 auto;
    cursor:pointer;
}

#about {
    width:100%;
    height:200px;
    position:fixed;
    top:0px;
    z-index: 3000;
}

HTML

<div id="header">
  <div id="about">                  
    <p>test</p>
    <img id="logo2" src="assets/img/logokleinhover.png" alt="Logo" />
  </div>
</div>
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
For it to work above the html you would need to put the javascript in `$(document).ready(function(){.....});`
Nalum
+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