Jquery Internet Explorer compatibility (toggle and animate)
Question
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>
2 answers
solution1
2 2010-08-28 13:11:24
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>
solution2
0 2010-08-26 17:44:44
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.