Question

I’ve been working on a website that is very jQuery intensive in Chrome and Firefox. It’s now come to the stage where one opens it in IE and sees WTF IE is doing to the website.

I get a problem when clicking the minimise button (top left) in one of the windows on the page. The item should animate to a corner and change opacity however it just changes opacity and does not move. This is part of an animate function included below so is it a problem with animate in IE?

IE just gives the error “Invalid arguament – line 142 – jquery.js” (the actual jQuery source file) in the debugger.

The website is at http://pegfm.pezcuckow.com/ and the JS is in http://pegfm.pezcuckow.com/js/main.js

The line IE is referring to (142) is – according to the debugger in IE8

a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit;

This function is the one that is being called when the minimize button is pressed (inside an onready)

/* Minimize Windows */
    function windowm(id) {
        var left, right, top, bottom;
        if(id == "chat") { 
            shown = chat;
            if(chat==1) { chat = 3; } else { chat = 1; }
        } else if(id == "rplayed") { 
            shown = rplayed;
            if(rplayed==1) { rplayed = 3; } else { rplayed = 1; }
        } else if(id == "info") { 
            shown = info;
            if(info==1) { info = 3; } else { info = 1; }
        } else if(id == "player") { 
            shown = player;
            if(player==1) { player = 3; } else { player = 1; }
        }

        wid = "#" + id;
        bid = "#b_" + id;
        if(shown==3) { dir = "+"; opacity = 1; } else { dir = "-"; opacity = 0.1; }
        amt = '=70%';
        if(id == "chat") { 
            right = dir + amt;
            top = dir + amt;
        } else if(id == "rplayed") { 
            left = dir + amt;
            top = dir + amt;
        } else if(id == "info") { 
            right = dir + amt;
            bottom = dir + amt;
        } else if(id == "player") { 
            left = dir + amt;
            bottom = dir + amt;
        }
        $(wid).animate({
            opacity: opacity,
            left: left,
            top: top,
            bottom: bottom,
            right: right
        }, 200);
        $(bid).fadeToggle("fast");
    }

    $("#info .minus").click(function(){windowm('info')});
    $("#chat .minus").click(function(){windowm('chat')});
    $("#rplayed .minus").click(function(){windowm('rplayed')});
    $("#player .minus").click(function(){windowm('player')});

The CSS for two of the windows is shown below

.window {
    position: absolute;
    width: 394px;
    height: 262px;
    background-image:url(../images/bg_window.png);
    z-index:3;
    display: none;
}
#rplayed {
    left: 50%;
    top: 50%;
    margin-left: -197px;
    margin-top: -131px;
    z-index: 3;
    overflow:hidden;
}
#info {
    bottom: 50%;
    right: 50%; 
    margin-right: -197px;
    margin-bottom: -131px;
    z-index: 2; 
}

Answer 1

Try changing that line to:

a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now||0):a.now)+a.unit;