0

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");
   }

});

Edited by turpentyne

1
Contributor
1
Reply
7
Views
3 Years
Discussion Span
Last Post by turpentyne
0

aha!

It was a conflict of some kind from earlier testing. In an attempt to make the animations do what I wanted, I had a snippet of code in the css. When I deleted this, everything worked:

.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');
zoom: 1;
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.