Strange IE JQuery problem

Question

Works in chrome, and works in ff, but not in IE.

IE refuses to call the the function in my callback.

I'll post the code I feel is relevant:

function slideRight(){
    disableAll();

    var leftMarg = parseFloat(opiHolder.css("marginLeft"));
    var fullWidth = parseFloat(opiHolder.css("width"));

    if(fullWidth + leftMarg > opiWidth) {

        opiHolder.animate({marginLeft: '-=' + (fullWidth + leftMarg - opiWidth) + 'px'}, 'slow', function() {

            alert("this is working now");       

            enableAll();

        });

    } else {
        enableAll();
    }       
}

This seems so strange so I ran an experiment:

$(document).ready(function() {
    var a = "1000";
    var b = "800";

    var c = parseFloat(a);
    var d = parseFloat(b);

    $("#suck").animate({marginLeft: '-=' + (c + d) + 'px'}, 'slow', function(){funcX();});              

    function funcX(){
        alert("here");
    }
});

THIS works perfectly.

I can see the "here" alert, but not the "this is working now" alert. It's really bringing me down!

I've replicated the conditions as best I can...

What is happening?

ANY help would be appreciated.

Thanks!

--Mike

edit: here is the code...

$(document).ready(function() {
    var viewer = $("#viewer");
    var lock = false;

    var contactsCounter = 1;
    var companyCounter = 1;

    var conHolder = $(".contactsHolder");
    var viewHolder = $("#viewerHolder");

    var frontStop = conHolder.css("marginLeft");
    var ERROR = 0;

    var viewerHolderPadding = parseFloat($("#viewerHolder").css("padding-top"));
    var superViewerPadding = parseFloat($("#superViewer").css("padding-top"));
    var contactsHolderMargin = parseFloat($(".contactsHolder").css("margin-top"));
    var viewerHeight = parseFloat($(".viewer").css("height"));
    var contactsWidth = parseFloat($(".contacts").css("width"));
    var contactsMarginRight = parseFloat($(".contacts").css("margin-right"));
    var contactsMarginLeft = parseFloat($(".contacts").css("margin-left"));

    var moveHorzAmount = contactsWidth + contactsMarginRight + contactsMarginLeft;
    var moveVertAmount = viewerHeight + contactsHolderMargin;
    var detectViewerMeasure = viewerHolderPadding + superViewerPadding + contactsHolderMargin;

    var companyInput = "Company:<select><option>Wendys</option><option>McDonalds</option><option>Earls</option></select>-or-<input type='text' />";
    var contactInput = "<div class='formholder'><table border='0'><tr><td>Contact Name:</td><td><input type='text' /></td><td></td></tr><tr><td>Email:</td><td><input type='text' /></td><td></td></tr><tr><td>Position in Company:</td><td><input type='text' /></td><td></td></tr><tr><td>Phone number:</td><td><input type='text' /></td><td>Extension:</td><td><input type='text' /></td></tr><tr><td>Prime contact?</td><td><input type='checkbox' /></td><td></td></tr></table></div>";

    $("#controls").draggable({ opacity: .7 });

    function detectViewer(){

        var companies = [];
        var pos;

        viewHolder.children().each(function () {
            companies.push($(this));
        });

        for(var i = 0; i < companies.length; i++){

            pos = companies[i].position().top;

            if(pos == detectViewerMeasure){

                var idInPlace = companies[i].attr("id");

                return idInPlace.replace("viewer", "");

            }
        }

        alert("Failure in detectViewer() class, contact administrator");

        return -1;
    }

    function disableAll(){
        $("#right").attr("disabled", true);
        $("#left").attr("disabled", true);
        $("#up").attr("disabled", true);
        $("#down").attr("disabled", true);
        $("#rem").attr("disabled", true);
    }

    function enableAll(){
        $("#right").removeAttr("disabled");
        $("#left").removeAttr("disabled");
        $("#up").removeAttr("disabled");
        $("#down").removeAttr("disabled");
        $("#rem").removeAttr("disabled");
    }

    $("#left").click(function(){
        disableAll();

        var currentCompany = detectViewer();
        var toSlide = $("#holder" + currentCompany);
        var currentPosition = toSlide.css("marginLeft");

        if(currentPosition != frontStop || currentPosition < frontStop) {

            toSlide.animate({marginLeft:'+=' + moveHorzAmount + 'px'}, 'slow', function() {
                enableAll();
            });

        } else {
            enableAll();
        }
    });

    $("#right").click(function() {

        disableAll();

        var currentCompany = detectViewer();
        var toSlide = $("#holder" + currentCompany);
        var left = parseFloat(toSlide.css("marginLeft"));
        var width = parseFloat(toSlide.css("width"));

        if((left + width - moveHorzAmount) > moveHorzAmount){

            toSlide.animate({marginLeft:'-=' + moveHorzAmount + 'px'}, 'slow', function(){

                enableAll();

            });

        } else {
            enableAll();
        }
    });

    $("#down").click(function() {
        disableAll();

        var top = parseFloat(viewHolder.css("marginTop"));
        var height = parseFloat(viewHolder.css("height"));

        if((height+top) > moveVertAmount) {

            viewHolder.animate({marginTop: '-=' + moveVertAmount + 'px'}, 'slow', function( ){
                enableAll();
            });

        } else {
            enableAll();
        }
    });

    $("#up").click(function() {

        disableAll();
        var top = parseFloat(viewHolder.css("marginTop"));

        if(top < 0) {

            viewHolder.animate({marginTop: '+=' + moveVertAmount + 'px'}, 'slow', function(){
                enableAll();
            });

        } else {
            enableAll();
        }
    });     

    $("#add").click(function(){

        var viewerDetected = detectViewer();
        var tmpString = "#viewer" + viewerDetected + " > #contactsHolder";
        var companyAndContact = $(tmpString);
        var currentViewer = $("#holder" + viewerDetected);
        var size = currentViewer.css("width");
        var num = parseFloat(size);
        var px = "px";

        num += moveHorzAmount;  
        currentViewer.css("width", num);
        contactsCounter++;

        var tmpString = "#viewer" + viewerDetected + " >  #holder" + viewerDetected;
        var companyAndContact = $(tmpString);
        companyAndContact.append("<div class='contacts' id='con" + viewerDetected + "_" + contactsCounter + "'>" + contactInput + "</div>");
        currentViewer.animate({marginLeft:'-=' + moveHorzAmount + 'px'}, 'slow');

    });

    $("#addComp").click(function() {
        companyCounter++;
        var viewerDetected = detectViewer();
        viewHolder.append("<div class='viewer' id='viewer" + companyCounter + "'><div class='contactsHolder' id='holder" + companyCounter + "'><div class='contacts' id='con" + viewerDetected + "_" + "1'><div class='formholder'>" + companyInput + "</div></div></div></div>");
        viewHolder.animate({marginTop: '-=' + moveVertAmount + 'px'}, 'slow');

    });

    $("#rem").click(function(){

        disableAll();

        var kids = [];
        var currentCompany = detectViewer();
        var toRem = $("#holder" + currentCompany);

        toRem.children().each(function () {
            kids.push($(this));
        });

        var viewerView = (Math.round(parseFloat(toRem.css("marginLeft"))/moveHorzAmount))*-1;

        if(viewerView !== 0) {
            var currentID = kids[viewerView];
            var animateTo = parseInt($(".contacts").css("marginLeft"));

            toRem.animate({marginLeft:'+=' + moveHorzAmount + 'px'}, 'slow', function(){
                enableAll();
            });

            $(currentID).remove();

            var size = $("#holder" + currentCompany).css("width");
            var num = parseFloat(size);
            var px = "px";
            num -= moveHorzAmount;  
            toRem.css("width", num + px);

        } else {

            enableAll();
        }
    }); 

    $("#remComp").click(function() {
        disableAll();

        var currentCompany = detectViewer();
        var toRem = $("#viewer" + currentCompany);

        if(parseInt(currentCompany) !== 1){
            toRem.remove();

            viewHolder.animate({marginTop: '+=' + moveVertAmount + 'px'}, 'slow', function(){
                enableAll();
            });

        } else if(parseInt(currentCompany) == 1) {
            alert("You can't remove your only company!");
            enableAll();
        } else {
            enableAll();
        }
    }); 
});

Answer 1

Check you're effectively calling slideRight().
Check the values of leftMarg and fullWidth, it's possible that the expression "fullWidth + leftMarg > opiWidth" isn't true, so you never will see the alert().

Regards

Answer 2

1. check your MIME type for the script tag. should be type="text/javascript"
2. i don't see the code calling for the function slideRight().