Incompatible with jquery ui (resizable) - generates "Invalid argument" with Explorer
| Project: | jQuery Update |
| Version: | 5.x-2.0 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
| Issue tags: | ui.resizable |
Jump to:
When using a jquery ui resizable element, when starting the resize, an "Invalid Argument" error is thrown (IE7, IE8. FF silently ignores this problem, but it exists there too), on the following line (from ui.resizable 1.6, unminified, unpacked):
274: el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });The problem is that iniPos contain the string 'absolute' instead of the expected object {top, left}.
The reason for this is while ui.resizable expects normal jquery position() call, the compat.js file in this module contains the following code:
jQuery.each("top,left,position,float,overflow,color,background".split(","), function(i,n){
jQuery.fn[ n ] = function(h) {
return h == undefined ?
( this.length ? jQuery.css( this[0], n ) : null ) :
this.css( n, h );
};
});which overrides the position() function.
I've applied the following patch to ui.resizable, cause I couldn't find a way to safely fix compat.js. Obviously, I need to leave jquery.ui intact. I did not open this bug on the jquery_ui project, since I think the problem actually lies in the compat.js file from this module.
Patch for ui.resizable (do not use on production, added here for clarity only):
diff --git a/sites/all/modules/contrib/jquery_ui/jquery.ui/ui/ui.resizable.js b/sites/all/modules/contrib/jquery_ui/jquery.ui/ui/ui.resizable.js
index c43d0a8..27dea3d 100644
--- a/sites/all/modules/contrib/jquery_ui/jquery.ui/ui/ui.resizable.js
+++ b/sites/all/modules/contrib/jquery_ui/jquery.ui/ui/ui.resizable.js
@@ -258,8 +258,9 @@ $.widget("ui.resizable", $.extend({}, $.ui.mouse, {
},
_mouseStart: function(event) {
-
- var o = this.options, iniPos = this.element.position(), el = this.element,
+ offset = this.element.offset();
+ offsetParent = this.element.offsetParent().offset()
+ var o = this.options, iniPos = { left: offset.left - offsetParent.left, top: offset.top - offsetParent.top}, el = this.element,
ie6 = $.browser.msie && $.browser.version < 7;
o.resizing = true;
o.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
#1