IE Invalid Argument Error - Says it is an error in jQuery, but I don't think so

Question

I am pulling my hairs out over an invalid argument error in IE7, maybe all IE's...

The site is: http://www.karencaldwelldesign.com/fashion

IE says it is an error on line 12, but if I open up Script Debugger it says the problem is with some code in jQuery. I don't buy that.

So, I looked at my script (http://www.caldwellsnyder.com/__data/assets/js_file/0003/5943/kc-gallery.js) and line 65 seems to be the problem:

data = '<div id="content'+id+'" class="content">'+data+'</div>';

data is returned from the jQuery $.ajax() function, but I needed to wrap it with an additional numbered div.

In particular it is the id variable that is caused the invalid argument error, but I have no idea why! The var is just a number that gets incremented. Removing the var from that line lets the page load perfectly, but I really need to increment the id in this way.

Does anyone have any idea why this simple variable would be cause invalid argument in IE?

Answer 1

The error you are seeing comes from jQuery when you try to set a DOM attribute to a value that is invalid. For example try setting a z-index to NaN or a string. IE errors on this where firefox and other browsers just ignore the value.

You can see an example of this by dropping the following line in to the console on this page in IE8 or using Jash for earlier versions: jQuery("#header").css("z-index", NaN);

It looks like your variable glob_index is becoming undefined at some point, thus jQuery errors when trying to set the z-index of a DOM node to this.

Answer 2

Somehow you're ending up trying to set a width of -5px; IE doesn't like that. That value is coming from the line $this.css(cssToApply); in JScrollPane.js which gets it from calculating the variable realPaneWidth:

var realPaneWidth = paneWidth - settings.scrollbarWidth - settings.scrollbarMargin - p;

In that, paneWidth and settings.scrollbarWidth both equal 676, and settings.scrollbarMargin is 5, giving you -5 (p is zero).

In kc-gallery.js you appear to be initialising jScrollPane with the value of 676 for scrollbarWidth in the function applyScroll. This is called from the setInterval function assigned to the variable check_images, and that takes us all the way back up the call stack from the place where IE actually errors on setting width to -5px.

So it's definitely something to do with the way you're using JScrollPane. You may want to check the documentation for any tips - I've never used that plugin myself, so I'm afraid I can't help with that. However, a scrollbarWidth value of 676 seems a little excessive... according to the JScrollPane docs:

scrollbarWidth [int] - the width of the created scrollbar in pixels (defaults to 10)