CODEWITHSUNDEEP
javascriptjqueryinternet-explorerjquery-animate
Arlen Anderson
Arlen Anderson

Reputation: 2496

jQuery .animate issues in IE8

I am attempting to display screenshots of an iPhone app via a scrolling background using jQuery. The code I've written works perfectly in FF & Safari, but IE throws an "Invalid argument" error.

/EDIT: I figured I'd add what IE actually does when it fails. It jumps to the second screenshot and throws the error. Every other browser animates smoothly, but IE doesn't animate, it just jumps to the second screenshot then throws the error.

Here's my code:

var scrollInterval = 5000; // scroll every 5 seconds

    // set the default position
    var current = 1284;

    var screenScroll = function(){
        var imageSize = 1284;
        var screenshotWidth = 214;
        current -= screenshotWidth;

        if ( current < screenshotWidth) {
            current = imageSize;
        }

        var bgPos = current + "px top";
        $("#screenshotDiv").animate({backgroundPosition:bgPos}, 500);
        
    }

    $(document).ready(function() {
        //Calls the scrolling function repeatedly
        var init = setInterval(screenScroll, scrollInterval);
    });

Upvotes: 3

Views: 7273

Answers (3)

Giorgio Ghiatis
Giorgio Ghiatis

Reputation: 2130

The solution regarding the script by Alexander Farkas works but it needs first a little fix (as I needed in order to make it works). Line:

var end = toArray(fx.options.curAnim.backgroundPosition);

has to be changed in

var end = toArray(fx.end);

Upvotes: 0

Arlen Anderson
Arlen Anderson

Reputation: 2496

I wasn't able to get this working on IE8 using just jQuery. Apparently there's a bug with jQuery background position animations on IE. Surprise, surprise IE has issues with something that works on EVERY other modern browser.

Not to worry, i found a fix. Included this script after including jQuery and it will solve the problem. I tried to find an official link to the plugin, but gave up finding an up to date one so i'll just post the file:

/**
 * @author Alexander Farkas
 * v. 1.21
 */

(function($) {
    if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function(elem, name, force){
            if(name === 'background-position'){
                name = 'backgroundPosition';
            }
            if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if ( !force && style && style[ name ] ){
                return style[ name ];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }

    var oldAnim = $.fn.animate;
    $.fn.animate = function(prop){
        if('background-position' in prop){
            prop.backgroundPosition = prop['background-position'];
            delete prop['background-position'];
        }
        if('backgroundPosition' in prop){
            prop.backgroundPosition = '('+ prop.backgroundPosition;
        }
        return oldAnim.apply(this, arguments);
    };

    function toArray(strg){
        strg = strg.replace(/left|top/g,'0px');
        strg = strg.replace(/right|bottom/g,'100%');
        strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
        var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
        return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
    }

    $.fx.step. backgroundPosition = function(fx) {
        if (!fx.bgPosReady) {
            var start = $.curCSS(fx.elem,'backgroundPosition');

            if(!start){//FF2 no inline-style fallback
                start = '0px 0px';
            }

            start = toArray(start);

            fx.start = [start[0],start[2]];

            var end = toArray(fx.options.curAnim.backgroundPosition);
            fx.end = [end[0],end[2]];

            fx.unit = [end[1],end[3]];
            fx.bgPosReady = true;
        }
        //return;
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
        fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

    };
})(jQuery);

The code now works flawlessly in IE8. I haven't bothered to test in IE7 because only 13% of my traffic comes from IE, so i won't bother to support older versions.... Too much of a headache.

Upvotes: 5

SilverbackNet
SilverbackNet

Reputation: 2074

IE requires the second argument to be {duration: 500}, right? Or is that just convention?

Actually, looking around, backgroundPosition is broken on IE8 when used with top: http://reference.sitepoint.com/css/background-position

Maybe you can try bottom instead?

Upvotes: 0

Related Questions