I have a bit of script for a footer section that is to expand up, when the user rolls over it - and go back down, when they are not over it.
Everything works fine, it seems. But not quite in Internet Explorer. The content inside of the three "ie-curves"-classed boxes is not showing up, for some reason. The animation works fine. and the html inside shows up for a second before the js hides it. But when I mouse over, the content isn't visible (unless I go into quirks mode) I do see a console error saying that at line 57 character 5, SCRIPT5009: 'hidden' is undefined. When I look at the source, it says opacity is 1, and filter: alpha(opacity=100); It shouldn't matter anyway, I understand that jquery has all the browser support built in.
But still, it's not showing
Here's the main content, below that, the javascript: (let me know if I missed something important in the post)
html and some css
<!DOCTYPE html>
<!--[if IE]>
<!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd">
<![endif]-->
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/functions.js"></script>
</head>
<body id="sliderbg">
<div id="body1">
main content goes here
</div>
<div id="footer-container">
<div id="three-boxes-holder">
<div class="three-boxes">
<div class="ie-curves">
<h6>SUCCEED</h6>
<p class="box-paragraphs">text</p>
</div>
</div>
<div class="three-boxes">
<div class="ie-curves">
<h6>PRODUCTS</h6>
<p class="box-paragraphs">
content
</p>
</div>
</div>
<div class="three-boxes">
<div class="ie-curves">
<h6>NEWS</h6>
content
</div>
</div>
<div class="clear-it"></div>
</div>
<div class="clear-it"></div>
<div id="foot-nav-main">
<div class="foot-nav-divs">
section1
</div>
<div class="foot-nav-divs">
section 2
</div>
<div class="foot-nav-divs">
section 3
</div>
<div class="foot-nav-divs">
section 4
</div>
<div class="foot-nav-divs">
asdf
</div>
<div class="foot-nav-divs">
asdf
</div>
<div class="foot-nav-divs3" id="foot-3divs">
asdff
</div>
</div>
</div>
</div>
<style>
</style>
<!--[if IE]>
<script type="text/javascript">
h6 {
font-family: 'Archivo Narrow',sans-serif;
font-size: 1.5em;
margin: 0px 0px 8px;
font-weight: 700;
color: rgb(193, 49, 57);
text-align: left;
}
#footer-container {
filter:none;
background-color:#013150;
height:190px;
}
#three-boxes-holder {
height:108px;
}
.ie-curves {
display:block !important;
}
.three-boxes > * { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0, M21=0.7071067811865467, M22=-1.4142135623730934, SizingMethod='auto expand')";}
.three-boxes > * { filter: progid:DXImageTransform.Microsoft.Matrix(
M11=3.85,
M12=-0.2,
M21=0.0,
M22=0,
SizingMethod='auto expand');
}
</script>
<![endif]-->
</body>
</html>
here's the javascript (jquery):
$(document).ready(function() {
$('#foot-nav-main,#footer-container').stop().animate({ height: "50px" }, 30, function() {
/* animation done */
});
$('#three-boxes-holder').stop().animate({ height: "0px", opacity: "0", marginBottom: "0px"}, 30, function() {
/* animation done */
});
$('.ie-curves').stop().animate({ opacity: "0"}, 30, function() { /* animation done */ });
$(".footer-ul").css('display','none');
$("#footer-container").mouseenter(function(){
$(".footer-ul").css('opacity','0').css('display','block');
$('#foot-nav-main,#footer-container').stop().animate({ height: "250px" }, 300, function() {
$('.ie-curves').stop().animate({ opacity: "1"}, 450, function() {
/* animation done */
});
});
$('#three-boxes-holder').stop().animate({ height: "130px", opacity: "1", marginBottom: "15px" }, 300, function() {
});
$(".footer-ul").css('display','block').stop().animate({ opacity: 100 }, 6000, function() {
/* animation done */
});
});
$("#footer-container").mouseleave(function(){
$(".footer-ul").stop().animate({ opacity: 0 }, 220, function() {
$(".footer-ul").css('display','none');
});
$('.ie-curves').stop().animate({ opacity: "0"}, 25, function() {
$('#three-boxes-holder').stop().animate({ height: "20px", opacity: "0", marginBottom: "0px" }, 300, function() {
/* animation done */
});
});
$('#footer-container').stop().animate({ height: "50px" }, 400, function() { /* animation complete */ });
$('#foot-nav-main').stop().animate({ height: "32px" }, 400, function() { $(".footer-ul").css('display','none'); }).css({ overflow: hidden });
});
$(".has-drop").mouseenter(function(){
$('.drop-menu').stop().animate({ height: "185px" }, 321, function() {
/* animation done */
});
});
$(".has-drop").mouseleave(function(){
$('.drop-menu').stop().animate({ height: "0px" }, 621, function() {
/* animation done */
});
});
if ($.browser.msie) {
$('.ie-curves').css("display","block").css("opacity","1");
$('.box-paragraphs').css("display","block").css("opacity","1");
}
});