#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: | |
Blocked by: | Blocking: |
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.
Change History (2)
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.8 |
---|
comment:2 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
Fixed in r3438. Using right/bottom positioning is now supported.