Attach a Size effect

The Size effect changes the target element’s width and height. Many of the clustered effects use the Size effect: Grow, Blind, Slide.

You can only attach this effect to the following HTML elements: address, dd, div, dl, dt, form, img, ol, ul, applet, center, dir, menu, or pre.

To link the SpryEffects.js file on your web page, add the following code to the head of your document:
```
<head>
. . .
<script  src="../includes/SpryEffects.js" type="text/javascript" ></script>
</head>
```
Note: The exact file path differs, depending on where you store the SpryEffects.js file.

The SpryEffects.js file is in the includes folder of the Spry folder that you downloaded from Adobe Labs. See Prepare your files.

Make sure your target element has a unique ID. The target element is the element that changes when the user interacts with the page to cause the effect.

<div id="size1"><p>Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliqt</p></div>

To create the effect, add a JavaScript event to trigger the effect, a script tag that creates the effect object, and size variables. For example, if you want the user to click on a sentence that causes another paragraph to resize, you might add the following event and script tag:
```
<p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
<script type="text/javascript">
var fromRect = new Spry.Effect.Utils.Rectangle();
fromRect.width = 100;
fromRect.height = 300;
var toRect = new Spry.Effect.Utils.Rectangle();
toRect.width = 300;
toRect.height = 900;
Spry.Effect.makeClipping(document.getElementById("size1"));
var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 2000, toggle: true});
</script>
```
Note: It’s important that you add the script tag after the code for the target element. Otherwise the page will return a JavaScript error when you try to trigger the effect.

The first argument of the Spry.Effect.Size method is always the target element’s ID ("size1" in the preceding example).

The second argument is a rectangle that represent the starting dimensions of the element. The default units of measure are pixels. To change this value, use the units property of the rectangle: fromRect.units = 'em';

The third argument is a rectangle that represents the ending dimensions of the element. The default units of measure are pixels. To change this value, use the units property of the rectangle: toRect.units = 'em';

Note: Make the units for both starting and ending rectangles be the same; otherwise the effect will not accept them as valid parameters

Observe the following line of code in the preceding example:
```
Spry.Effect.makeClipping(document.getElementById("size1"));
```
The target element should have the CSS overflow property set to hidden or scroll. When shrinking the element dimensions, you do not want the content to be displayed outside the inner content area. The preceding code line ensures that the element overflow property is correct for the Size effect to work.

The complete code looks as follows:
```
<head>
. . .
<script src="../includes/SpryEffects.js" type="text/javascript"></script>
</head>
<body>
<p><a onclick="size_effect.start(); return false;" href="#">Click here to resize the paragraph.</a></p>
<div id="size1"><p>Lorem ipsum dolor sit amet, consetetur 
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliqt</p></div>
<script type="text/javascript">
var fromRect = new Spry.Effect.Utils.Rectangle();
fromRect.width = 100;
fromRect.height = 300;
var toRect = new Spry.Effect.Utils.Rectangle();
toRect.width = 300;
toRect.height = 900;
Spry.Effect.makeClipping(document.getElementById("size1"));
var size_effect = new Spry.Effect.Size("size1", fromRect, toRect, {duration: 2000, toggle: true});
</script>
</body>
```

Size effect options

The following table lists available options for the Size effect.

Option	Description
duration	Duration of the effect in milliseconds. The default value is 1000.
scaleContent	Scales the content of the element proportionally with the dimensions of the animation. The default value is `false`.
toggle	Lets you create a toggle effect. The default value is `false`.
useCSSBox	Modifies the border, margin and padding proportionally to the element’s inner content box. The default value is `false`.
transition	Determines the type of transition. The default is `Spry.sinusoidalTransition`.
fps	Determines the number of frames per second (fps) of the animation. The default is 60.
setup	Lets you define a function that is called before the effect begins, e.g.,`setup:function (element,effect){/* ... */}`.
finish	Lets you define a function that is called after the effect finishes, e.g., `finish:function (element,effect){/* ... */}`.

Sample code:

var fromRect = new Spry.Effect.Utils.Rectangle();
fromRect.width = 100;
fromRect.height = 100;
var toRect = new Spry.Effect.Utils.Rectangle();
toRect.width = 300;
toRect.height = 300;
Spry.Effect.makeClipping(document.getElementById("targetID"));
var size_effect = new Spry.Effect.Size("targetID", fromRect, toRect, {duration: 2000, toggle: true, scaleContent: true, transition: Spry.fifthTransition});