Search and Top Navigation
#4540 closed bug (fixed)
Opened May 19, 2009 09:28AM UTC
Closed November 10, 2009 04:17PM UTC
Last modified January 17, 2010 06:06AM UTC
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.