CODEWITHSUNDEEP
javascriptjquerycssinternet-explorer
amit
amit

Reputation: 10271

IE javascript compatibility is killing me

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... :(

Upvotes: 0

Views: 466

Answers (4)

Lenn Dolling
Lenn Dolling

Reputation: 1300

Perhaps you can try something like this... will take you to figure out how to implement... but a base variable declaration is there that you can use for javascript dom changes

 var cross=document.all? document.all.cpanel: document.getElementById("cpanel");

   cross.style.width=100 +"px";   //eg of setting style.width property

something like that might be a start in getting your object compatible for editing.

Upvotes: 0

Nooshu
Nooshu

Reputation: 475

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.

Upvotes: 0

Joel
Joel

Reputation: 19378

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");

Upvotes: 4

Sergey Ilinsky
Sergey Ilinsky

Reputation: 31545

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

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

Upvotes: 2

Related Questions