Skip to main content

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.

Attachments (0)
Change History (2)

Changed May 19, 2009 10:33AM UTC by jzaefferer comment:1

milestone: TBD1.8

Changed November 10, 2009 04:17PM UTC by scottgonzalez comment:2

resolution: → fixed
status: newclosed

Fixed in r3438. Using right/bottom positioning is now supported.