Question

Question:

I’m getting an Invalid Argument Error when debugging a site of mine. The error only occurs when hovering over an accordian menu item.. After further inspection i discovered the code that could potentially be causing this and it is in my question further below. (See Update #2).

I have no idea what specifically is causing the error, or how to fix it.. HALPS

The line of code that it highlights is:
a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now

I can’t figure it out.. I hate IE8 🙂

---

Update #1

I Traced my problem to the collapsible navigation that came pre-built with this Admin Template i downloaded from ThemeForest.

something in the code for “Accordian Menu” that i found:

https://gist.github.com/48d7ffcc654ce24040c5

and this bit of code to initialize the menu:

/*
 * Accordion Menu
 */
$('.menu').initMenu();

Update #2

Further inspection reveals IE8 Dev Tools throwing this under Locals:

Prop "PaddingRight" String

Then i stumbled on a line in the second function in the gist:

        $(this).hover(
            function() {
                $(this).animate({
                    paddingLeft:parseInt(padding_left) + parseInt(5) + "px",
                    paddingRight: parseInt(padding_right) - parseInt(5) + "px"
                }, 130);
            },
            function() {
                bc_hover = $(this).css("background-color");
                $(this).animate({
                    paddingLeft: padding_left,
                    paddingRight: padding_right
                }, 130);
            }

Update #3

Here is a jsfiddle of the code with something i tried, and in jsfiddle i can’t replicate the problem. http://jsfiddle.net/7Y68Y/6/

Answer 1

This kind of error is common when meddling with CSS. If a CSS property is given a wrong value, IE will complain about it.

Update

The OP forgot to mention that padding_left is declared earlier as $(this).css('padding-left')

In that case, you should be aware of empty strings; for instance:

$('<div />').css('padding-left') == ''
parseInt('') == NaN

With that knowledge, let’s change the assignments:

var padding_left = $(this).css("padding-left");
var padding_right = $(this).css("padding-right");

To turn them into proper integers:

var padding_left = parseInt($(this).css('padding-left') || 0);
var padding_right = parseInt($(this).css("padding-right") || 0);

Then let’s go back to the animation code:

$(this).animate({
    paddingLeft: parseInt(padding_left) + parseInt(5) + "px",
    paddingRight: parseInt(padding_right) - parseInt(5) + "px"
}, 130);

Let’s assume the original padding was also in px units. In that case we can simplify the statement to:

$(this).animate({
    paddingLeft: (padding_left + 5) + "px",
    paddingRight: (padding_right - 5) + "px"
}, 130);

And the other:

$(this).animate({
    paddingLeft: padding_left + "px",
    paddingRight: padding_right + "px"
}, 130);