Ticket #4540 (closed bug: fixed)

Opened 5 years ago

Last modified 5 years ago

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.

Change History

comment:1 Changed 5 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.8

comment:2 Changed 5 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed

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

Note: See TracTickets for help on using tickets.