IE javascript compatibility is killing me...

Question

I left cross-browser compatiblity issues for last, and it seems IE is going to be a big pain. Nothing is working in IE;

First of all, the following is not working:

var img = document.createElement("img");
img.setAttribute("height", "270px");

I have an invisible div onmouseover which displays a transparent div "cpanel". I cant access that as well.

if(hover.addEventListener){
 hover.addEventListener('mouseover',function () {$('#cpanel').fadeIn("slow");/*Core.addClass(cpanel,"on");*/},false);
 hover.addEventListener('mouseout', function () {$('#cpanel').fadeOut("slow");/*Core.removeClass(cpanel,"on");*/},false);
}
else if(hover.attachEvent) {
 hover.attachEvent('onmouseover',function () {$('#cpanel').fadeIn("slow");/*Core.addClass(cpanel,"on");*/});
 hover.attachEvent('onmouseout', function () {$('#cpanel').fadeOut("slow");/*Core.removeClass(cpanel,"on");*/}); 
}

Maybe there are some z-index issues?

I am unable to find more bugs as IE is not moving to the later stages... :(

Answer 1

The @height attribute (unlike height style property) accept numeric values only.

img.setAttribute("height", "270");

Answer 2

Why are you attaching your event handlers manually when jquery (already on the page by the looks of it) can do it more reliably?

$(hover).mouseover(function () { $('#cpanel').fadeIn("slow"); });
$(hover).mouseout(function () { $('#cpanel').fadeOut("slow"); });

And for the image:

var img = $("<img />");
img.css("height", "270px");

Answer 3

Or combine them all

$('<img/>').height(270).append('body');

If no px is specified it is taken by default jQuery height method

Or even

$('<img/>').css({'height':'270px'}).append('body');

Append (or prepend) to whatever you need to.

For the hover you are trying

var $cpanel = $('#cpanel');
$(div).hover(function(){//hover
$cpanel.fadeIn("slow");
},
function(){//hover out
$cpanel.fadeOut("slow");
});

The top line is to cache the panel in a var save looking it up 2 times.