JavaScript - invalid argument IE8

Question

I've got a little JavaScript problem. The code is working in Opera and Firefox browser but not in Internet Explorer 8. Does anybody know why?

function createbtn(object, inner) {
    var hover = document.createElement("div");
    hover.setAttribute("class", "myarea");
    if (inner) {
        hover.style.width = object.width - 16 + "px";
        hover.style.height = object.height - 16 + "px";
        hover.style.top = getposy(object) + "px";
        hover.style.left = getposx(object) + "px";
    } else {
        hover.style.width = object.width + "px";
        hover.style.height = object.height + "px";
        hover.style.top = getposy(object) - 8 + "px";
        hover.style.left = getposx(object) - 8 + "px";
    }
}

I'm just learning Javascript. Any feedback welcome. Simon

Answer 1

If object.width is less than 16

hover.style.width = object.width - 16 + "px";

then this will produce a string with a negative sign at the front, which is illegal since widths have to be non-negative.

You can fix this by saying

hover.style.width = Math.max(object.width - 16, 0) + "px";

and similarly for height.

Many browsers ignore invalid content, but IE in certain modes is stricter, so you are probably just getting silent failure in the others.

Answer 2

I guess it has to do with hover.setAttribute("class", "myarea");. If IE 8 is running in IE 7 or lower Mode this won't work. Then you have to use hover.className = 'myarea' (supported by all browsers).

The sAttrName parameter requires the name of the desired content attribute and not the Document Object Model (DOM) attribute. For example, in IE8 mode, this method no longer requires sAttrName to be "className" when setting, getting, or removing a CLASS attribute. Earlier versions of Internet Explorer and Internet Explorer 8 in compatibility mode still require sAttrName to specify the corresponding DOM property name.

http://msdn.microsoft.com/en-us/library/ms536739%28v=vs.85%29.aspx

Check the mode IE is running.