From 39dcad6e498a4c7b1507f188ea7733ff5ac1eb26 Mon Sep 17 00:00:00 2001 From: gnarf Date: Fri, 11 Mar 2011 20:00:36 -0600 Subject: [PATCH 1/2] effects.explode: rework math used to split the div into peices - split the box disregarding margins Fixes #3968 - effects explode: explodes from the right instead of from the center --- ui/jquery.effects.explode.js | 71 +++++++++++++++++++++++------------- 1 file changed, 45 insertions(+), 26 deletions(-) diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index 79cf1a9fb..d8f8c8c39 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -18,45 +18,62 @@ $.effects.explode = function( o ) { var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3, cells = rows, - el = $( this ).show().css( 'visibility', 'hidden' ), + el = $( this ), mode = $.effects.setMode( el, o.mode || 'hide' ), - offset = el.offset(), - width = el.outerWidth( true ), - height = el.outerHeight( true ), - peices = []; + show = ( mode == 'show' ), - //Substract the margins - not fixing the problem yet. - offset.top -= parseInt( el.css( "marginTop" ), 10 ) || 0; - offset.left -= parseInt( el.css( "marginLeft" ), 10 ) || 0; + // show and then visibility:hidden the element before calculating offset + offset = el.show().css( 'visibility', 'hidden' ).offset(), + + // width and height of a piece + width = Math.ceil( el.outerWidth() / cells ), + height = Math.ceil( el.outerHeight() / rows ), + peices = [], + i, j, pos; // clone the element for each row and cell. - for( var i = 0; i < rows ; i++ ) { // = - for( var j = 0; j < cells ; j++ ) { // || + for( i = 0; i < rows ; i++ ) { // ===> + for( j = 0; j < cells ; j++ ) { // ||| + pos = { + // wrapper base position in body + left: offset.left + j * width, + top: offset.top + i * height, + + // x position in matrix with 0,0 at the center + rx: j - cells / 2, + ry: i - rows / 2 + }; + + // Create a clone of the now hidden main element that will be absolute positioned + // within a wrapper div off the -left and -top equal to size of our pieces el .clone() - .appendTo('body') - .wrap('
') + .appendTo( 'body' ) + .wrap( '
' ) .css({ position: 'absolute', visibility: 'visible', - left: -j*(width/cells), - top: -i*(height/rows) + left: -j * width, + top: -i * height }) + + // select the wrapper - make it overflow: hidden and absolute positioned based on + // where the original was located +left and +top equal to the size of pieces .parent() - .addClass('ui-effects-explode') + .addClass( 'ui-effects-explode' ) .css({ position: 'absolute', overflow: 'hidden', - width: width/cells, - height: height/rows, - left: offset.left + j*(width/cells) + (o.mode == 'show' ? (j-Math.floor(cells/2))*(width/cells) : 0), - top: offset.top + i*(height/rows) + (o.mode == 'show' ? (i-Math.floor(rows/2))*(height/rows) : 0), - opacity: mode == 'show' ? 0 : 1 + width: width, + height: height, + left: pos.left + ( show ? pos.rx * width : 0 ), + top: pos.top + ( show ? pos.ry * height : 0 ), + opacity: show ? 0 : 1 }).animate({ - left: offset.left + j*(width/cells) + (o.mode == 'show' ? 0 : (j-Math.floor(cells/2))*(width/cells)), - top: offset.top + i*(height/rows) + (o.mode == 'show' ? 0 : (i-Math.floor(rows/2))*(height/rows)), - opacity: mode == 'show' ? 1 : 0 - }, o.duration || 500, childComplete ); + left: pos.left + ( show ? 0 : pos.rx * width ), + top: pos.top + ( show ? 0 : pos.ry * height ), + opacity: show ? 1 : 0 + }, o.duration || 500, o.easing, childComplete ); } } @@ -69,9 +86,11 @@ $.effects.explode = function( o ) { } function animComplete() { - el.css({ visibility: 'visible' }); + el.css({ + visibility: 'visible' + }); $( peices ).remove(); - if ( mode != 'show' ) { + if ( !show ) { el.hide(); } if ( $.isFunction( o.complete ) ) { From 7bb0e40f7aa7d30737bff59af9362b3208284a7e Mon Sep 17 00:00:00 2001 From: gnarf Date: Sat, 12 Mar 2011 14:41:56 -0600 Subject: [PATCH 2/2] effects.explode: correcting my misspelled variable name :/ --- ui/jquery.effects.explode.js | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/ui/jquery.effects.explode.js b/ui/jquery.effects.explode.js index d8f8c8c39..fa2707b5e 100644 --- a/ui/jquery.effects.explode.js +++ b/ui/jquery.effects.explode.js @@ -28,21 +28,19 @@ $.effects.explode = function( o ) { // width and height of a piece width = Math.ceil( el.outerWidth() / cells ), height = Math.ceil( el.outerHeight() / rows ), - peices = [], - i, j, pos; + pieces = [], + + // loop + i, j, left, top, mx, my; // clone the element for each row and cell. for( i = 0; i < rows ; i++ ) { // ===> - for( j = 0; j < cells ; j++ ) { // ||| - pos = { - // wrapper base position in body - left: offset.left + j * width, - top: offset.top + i * height, + top = offset.top + i * height; + my = i - ( rows - 1 ) / 2 ; - // x position in matrix with 0,0 at the center - rx: j - cells / 2, - ry: i - rows / 2 - }; + for( j = 0; j < cells ; j++ ) { // ||| + left = offset.left + j * width; + mx = j - ( cells - 1 ) / 2 ; // Create a clone of the now hidden main element that will be absolute positioned // within a wrapper div off the -left and -top equal to size of our pieces @@ -66,12 +64,12 @@ $.effects.explode = function( o ) { overflow: 'hidden', width: width, height: height, - left: pos.left + ( show ? pos.rx * width : 0 ), - top: pos.top + ( show ? pos.ry * height : 0 ), + left: left + ( show ? mx * width : 0 ), + top: top + ( show ? my * height : 0 ), opacity: show ? 0 : 1 }).animate({ - left: pos.left + ( show ? 0 : pos.rx * width ), - top: pos.top + ( show ? 0 : pos.ry * height ), + left: left + ( show ? 0 : mx * width ), + top: top + ( show ? 0 : my * height ), opacity: show ? 1 : 0 }, o.duration || 500, o.easing, childComplete ); } @@ -79,8 +77,8 @@ $.effects.explode = function( o ) { // children animate complete: function childComplete() { - peices.push( this ); - if ( peices.length == rows * cells ) { + pieces.push( this ); + if ( pieces.length == rows * cells ) { animComplete(); } } @@ -89,7 +87,7 @@ $.effects.explode = function( o ) { el.css({ visibility: 'visible' }); - $( peices ).remove(); + $( pieces ).remove(); if ( !show ) { el.hide(); }