Ticket #4540 (closed bug: fixed)
Fix bug effect for IE7. In create wrapper function.
| Reported by: | TaeVjQuery | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8 |
| Component: | ui.effects.core | Version: | 1.7.1 |
| Keywords: | createWrapper | Cc: | |
| Blocking: | Blocked by: |
Description
I create login box id="login-container". Expected result is when user click button from top right corner, login box will show on the top right and run 'blind' effect. It works fine for Firefox, but IE7.
#login-container { position: absolute; right: 0px; width: auto; height: auto; z-index: 1; }
In IE7 it run effect on top left corner (it should run top right corner), when effect run complete, it change to top right corner immediately. So i try to find how to fix this, and i got solution like below
File: effects.core.js Function: createWrapper
// Wraps the element around a wrapper that copies position properties
createWrapper: function(element) {
//if the element is already wrapped, return it
if (element.parent().is('.ui-effects-wrapper'))
return element.parent();
//Cache width,height and float properties of the element, and create a wrapper around it
var props = { width: element.outerWidth(true), height: element.outerHeight(true), 'float': element.css('float') };
element.wrap('<div class="ui-effects-wrapper" style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
var wrapper = element.parent();
//Transfer the positioning of the element to the wrapper
if (element.css('position') == 'static') {
wrapper.css({ position: 'relative' });
element.css({ position: 'relative'} );
} else {
var top = element.css('top'); if(isNaN(parseInt(top,10))) top = 'auto';
var left = element.css('left'); if(isNaN(parseInt(left,10))) left = 'auto';
var right = element.css('right'); if(isNaN(parseInt(right,10))) right = 'auto'; // Added.
wrapper.css({ position: element.css('position'), top: top, left: left, right: right, zIndex: element.css('z-index') }).show(); // Modified
element.css({position: 'relative', top: 0, left: 0 });
}
wrapper.css(props);
return wrapper;
}
From above code, I add this line
var right = element.css('right'); if(isNaN(parseInt(right,10))) right = 'auto'; Added.
and modify
wrapper.css({ position: element.css('position'), top: top, left: left, right: right, zIndex: element.css('z-index') }).show(); Modified
With this solution, it can works correctly on both Firefox and IE7.

