jQuery and IE, not behaving at all.

Question

Solution

var options = { opacity: opacity }; //Many thanks to David Higgins for his help
var direction;
if(id == "chat") { 
    direction = {right: dir + amt, top: dir + amt };
} else if(id == "rplayed") { 
    direction = {left: dir + amt, top: dir + amt };
} else if(id == "info") { 
    direction = {right: dir + amt, bottom: dir + amt };
} else if(id == "player") { 
    direction = {left: dir + amt, bottom: dir + amt };
}
$.extend(options, direction);
$(wid).animate(options, 200);

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've gone through the jQuery stuff and I really can't see what is wrong with anything I have written and IE just gives the error "Invalid arguament - line 142 - jquery.js" (the actual jQuery source file).

On the website jQuery has two main purposes, updating elements with Ajax and JSON and moving elements around (hiding/showing & sliding) to create a window'd interface).

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

Can anyone explain what is wrong with my jQuery stuff? I have no idea where to start, I'm not expecting you to fix it just point me in the right direction and give me an idea of what's going on!

If you want to see what the website is supposed to do open it in FF or Chrome!

Many Thanks,

Answer 1

Im afraid I don't have the time to comb through the source, but if your stuck and you don't have it already, try stepping through the js with firebug lite to track down the issue.

Answer 2

Appears that your code around line 102 of main.js:

$(wid).animate({
  opacity: opacity,
  left: left,
  top: top,
  bottom: bottom,
  right: right
}, 200);

Is passing 'undefined' as a value for 'top'.

My suggestion,

the code above it ... should do something more like this:

var options = { opacity: opacity };
if(id == "chat") {
  jQuery.extend({right: dir + amt, top: dir + amt }, options);
} else if(id == "rplayed") {
  jQuery.extend({left: dir + amt, top: dir + amt}, options);
} // snipped - you get the point
$(wid).animate(options, 200);

I haven't tested the whole jQuery.extend() call ... but this should solve your invalid parameter problem - IE does not like setting invalid values to CSS properties (this includes 'null', 'undefined', alpha when numeric was expected, '0' when 'none' was expected, etc). FF, Chrome and Safari all handle this gracefully ... by just ignoring the CSS value (and in this case, it was omitting the value for you - causing the render to look right).

Hope this helps.