Question

I have written a small jquery application that allows a person to slide a handle 200 px to the right.

The application uses jQuery 1.2.6 and jquery UI 1.5.3

My script works flawlessly in all browsers except ie 7 (ie 6 untested, don’t care). It even works in ie 8.

to see the code app in action and the code via view source, please check out http://iomobile.dev.devsu.com.

iphone-unlock.js is the jquery code, which uses style.css specifically for the graphic elements. Sorry it’s very slow – caching is turned off while I debug.

Also, there are no errors for debugging. Any thoughts on why this is happening are greatly appreciated.

I thought it may be helpful to add the code in an edit:
$(document).ready(function()
{

var unlock = function()
{

    $.openPopupLayer({
        name: "iPhoneInteract",         
        url: "/sites/all/themes/tao/templates/iphone.html",

        afterClose: function () {
            $("#unlock-handle").animate({"left" : "-1"} );
            $("#slide-to-unlock").animate({opacity: 1}, 200 );
        top.location.href = 'http://iomobile.dev.devsu.com/?device=desktop';
        }
    });


}



$("#unlock-slider").slider({
    handle: "#unlock-handle",
    animate:true,
    slide: function(e,ui)
    {
        $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120));
    },
    stop: function(e,ui)
    {
        if($("#unlock-handle").position().left == 210)
        {
            unlock();
        }
        else
        {
            $("#unlock-handle").animate({left: 0}, 200 );
            $("#slide-to-unlock").animate({opacity: 1}, 200 );
        }
    }
    }
);

});
enter code here

Answer 1

IE7 has a problem with animation if two conditions are true:

• A containing DIV has position: relative, AND
• The property being animated is not set (in this case “left”)

Looking at the style.css, it appears you are setting a value for “left,” but #unlock-bottom does have position:relative so it’s unclear if the IE7-specific issue applies. It might be helpful to debug with the animated elements in a container that does not have position:relative to see if the problem goes away.

See http://www.electrictoolbox.com/jquery-animation-issues-ie7-position-relative/