add scale toggle and size to functional demos + move origin calculations to size

2 files changed, 32 insertions, 1 deletions

diff --git a/demos/functional/templates/ui.effects.general.html b/demos/functional/templates/ui.effects.general.html
index f6032d7c8..8f8e1877b 100644
--- a/demos/functional/templates/ui.effects.general.html
+++ b/demos/functional/templates/ui.effects.general.html
@@ -59,7 +59,7 @@
 
 			{
 				title: 'Scale',
-				desc: 'Change the size of an element.',
+				desc: 'Scales and element by a percentage.',
 				html: '<button id="doScale">Scale</button> \n' +
 					'<button onclick="$(\'#scale\').css({width: 144, height: 108});">Reset</button><br/>\n' +
 					'<div style="height: 108px;"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
@@ -75,6 +75,22 @@
 					{	desc: 'Scale from bottom-right',	source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' }
 				]
 			},
+			
+			{
+				title: 'Size',
+				desc: 'Change the size of an element.',
+				html: '<button id="doSize">Size</button> \n' +
+					'<button onclick="$(\'#size\').css({width: 144, height: 108});">Reset</button><br/>\n' +
+					'<div style="height: 108px;"><img id="size" src="templates/images/P1010063.JPG"/></div>',
+				destroy: '$("#doSize").unbind();',
+
+				options: [
+					{	desc: 'Size to 75x200',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 2000); });' },
+					{	desc: 'Size to 200x75',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 2000); });' },
+					{	desc: 'Size (125x210) from middle-center',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 2000); });' },
+					{	desc: 'Size (210x125) from bottom-right',	source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 2000); });' }
+				]
+			},
 
 			{
 				title: 'Shake',
diff --git a/demos/functional/templates/ui.effects.showhide.html b/demos/functional/templates/ui.effects.showhide.html
index fe57b1372..70e41b0cb 100644
--- a/demos/functional/templates/ui.effects.showhide.html
+++ b/demos/functional/templates/ui.effects.showhide.html
@@ -103,6 +103,21 @@
 					{	desc: 'Puff to 200%',	source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' }
 				]
 			},
+			
+			{
+				title: 'Scale',
+				desc: 'Grow/Shrink an element.',
+				html: '<button id="doScale">Toggle</button><br/>\n' +
+					'<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
+					'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
+					'<div style="clear: both;"></div>',
+				destroy: '$("#doPuff").unbind();',
+
+				options: [
+					{	desc: 'Scale defaults',	source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 2000); });' }
+				]
+			},
+
 
 			{
 				title: 'Slide',