Question

I have an image slideshow, which has a small DIV on top of it for ad copy. Every time the slide changes, the ad box fades out, and a new one fades in, in a different position.

This works great in every browser but IE. All of my jQuery animations are working fine, but for some reason the box won’t change position. Both .css() to change my top/left values and actually changing the class using .attr() fail in IE.

Here is the JS to change the class, and show the box. The first line simply gets the position from the filename (image-6.jpg).

var heroPosition = vars.currentImage.attr('src').substr(-5, 1);
switch(heroPosition) {
  case "1":
    $('#hero-ad').attr('class','hero-position-1');
    break;
  case "2":
    $('#hero-ad').attr('class','hero-position-2');              
    break;
  case "3":
    $('#hero-ad').attr('class','hero-position-3');
    break;
  case "4":
    $('#hero-ad').attr('class','hero-position-4');
    break;
  case "5":
    $('#hero-ad').attr('class','hero-position-5');
    break;
  case "6":
    $('#hero-ad').attr('class','hero-position-6');
break;
}
$('#hero-ad').show("fold", {}, 1000);

The code itself was sort of hacked into the Nivo image slider.

The live site is here http://www.sugarloaf.com/slredesignlocal/index.html

Most of the JS in js/plugins.js. CSS for the positions is in css/style.css

EDIT I should mention that I tried using .addClass() and .removeClass() and this method also failed.

Answer 1

I’m guessing you are having this problem specifically in IE because you are using substr() with a negative number. Check out this post. You should consider using slice() instead to get the value you’re expecting.