CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
user605530
user605530

Reputation: 21

jQuery animation not functioning correctly in IE8

Can't seem to target the problem with this. Works great in FF, Chrome, etc.. Anyone know whats going wrong here? Not only do the rollovers and image links not work but the navigation bar gets all messed up too. Normally I would just laugh and post the old get a new browser link, but unfortunately I do not have the luxury on this one.

http://daveywhitney.com/moons/

<!DOCTYPE html> 
<html> 
<head> 
<title>MOON</title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 


<script type="text/javascript"> 


/* Preloading, if you are into that */

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)


jQuery.preLoadImages(
    'img/moons/a0.png',
    'img/moons/a1.png',
    'img/moons/a2.png',
    'img/moons/a3.png',
    'img/moons/a4.png',
    'img/moons/a5.png',
    'img/moons/a6.png',
    'img/moons/p0.png',
    'img/moons/p1.png',
    'img/moons/p2.png',
    'img/moons/p3.png',
    'img/moons/p4.png',
    'img/moons/p5.png',
    'img/moons/p6.png'
);


/* hover actions for link-binding */

function evMouseOver(i) {
    console.log(i);
    $('#moon img').eq(i).attr('src','img/moons/a' + i + '.png');
    $('ul#nav li').eq(i).addClass('hover');
}

function evMouseOut(i)  {
    $('#moon img').eq(i).attr('src','img/moons/p' + i + '.png');
    $('ul#nav li').eq(i).removeClass('hover');
}


/* If the image sizes are not specified, this must be called at $(window).load() */

$().ready(function()    {

    $('#nav').fadeIn(2000);

    var original_pos = [];
    var parent_width = $('#moon').width();
    var parent_pos = $('#moon').offset();


/* set lists to respond to each other's hover events */

    $('.hoverbind').children().each(function(i) {
        i = $(this).index();
        $(this).hover(
            function()  {
                evMouseOver(i);
            },
            function()  {
                evMouseOut(i);
            }
        );

/* enable remote clicking for IMGs and LIs (HREF used will be the one in the UL) */
        $(this).click(
            function()  {
                parent.location = $('ul#nav li').eq(i).children('a').attr('href');
            }
        );
    });



    $('#moon img').each(function()  {

        el = $(this);

/*  keep default positions of children */
        original_pos = el.offset();

/*  move everybody to the middle: Lc=Lp+(Wp-Wc)/2           */
        el.offset({
            'left' : parent_pos.left + (parent_width - this.width)/2,
            'top' : original_pos.top
            });

/*  fade in  */
        el.animate(
            {
            'opacity' : 1
            }
        );

/*  bring everybody back where they started  */
        el.animate(
            {
            'left'  : 0, // (original_pos.left - parent_pos.left) - (original_pos.left - parent_pos.left), // Which of course = 0... WTF?  Does this make sense???
            'top'   : 0 //(original_pos.top - parent_pos.top)
            },
            {
            'duration' : 6000,
            'complete' : function() {}
            }
        );



    });

});
</script> 



</head> 
<body> 


<div id="wrapper"> 

    <div id="logo"> 
        <img src="img/logo.png" alt="Full Moon Creative" width="700" height="136" /> 
    </div> 

    <div id="moon" class="hoverbind"> 
        <img src="img/moons/p0.png" alt="" width="77" height="455" /> 
        <img src="img/moons/p1.png" alt="" width="104" height="455" /> 
        <img src="img/moons/p2.png" alt="" width="167" height="455" /> 
        <img src="img/moons/p3.png" alt="" width="321" height="455" style="z-index: 3;" /> 
        <img src="img/moons/p4.png" alt="" width="164" height="455" /> 
        <img src="img/moons/p5.png" alt="" width="113" height="455" /> 
        <img src="img/moons/p6.png" alt="" width="69" height="455" /> 
    </div> 

<!-- Changing the HREFs on this link list will change the links on corresponding images - by index, so watch order  --> 

    <ul id="nav" class="hoverbind"> 
        <li><a href="#contact">Contact Us</a></li> 
        <li><a href="#gal">Gallery</a></li> 
        <li><a href="#prods">Production Services</a></li> 
        <li><a href="#home">Home</a></li> 
        <li><a href="#mktng">Marketing Services</a></li> 
        <li><a href="#clist">Client List</a></li> 
        <li><a href="#clogin">Client Login</a></li> 
    </ul> 

</div> 


</body> 
</html>

Upvotes: 1

Views: 758

Answers (1)

lsuarez
lsuarez

Reputation: 4992

Your variable i is falling out of scope in IE. Just use $(this).index() in the hover function like so.

$('.hoverbind').children().each(function(i) {
    //i = $(this).index();
    $(this).hover(
        function () {
            $(this).attr('src', 'img/moons/a' + $(this).index() + '.png');
            $('ul#nav li').eq($(this).index()).addClass('hover');
            //evMouseOver(i);
        },
        function()  {
            $(this).attr('src', 'img/moons/p' + $(this).index() + '.png');
            $('ul#nav li').eq($(this).index()).removeClass('hover');
            //evMouseOut(i);
        }
    );

Alternatively, just bind hover as follows:

$(this).hover(evMouseOver, evMouseout);

Then just move the code currently inside each anonymous function block there verbatim.

I haven't bothered checking thoroughly, but the nav bar looks like an IE7 only issue and can probably be fixed with some CSS changes. Just float your LI elements left with a fixed width, give your UL margin: 0 auto to center, and it should display fine.

Upvotes: 1

Related Questions