script.aculo.us - Scale Effect

Description

This effect gradually scales an element up or down, possibly on only one axis (horizontal or vertical). You can use this effect to adjust the size of the target element.

Syntax

You can use one of the following two forms to use this effect −

new Effect.Scale('id_of_element', scaleToPercent, [options]);
OR
new Effect.Scale(element, scaleToPercent, [options]);

The scaleToPercent parameter specifies a numeric value that indicates the percentage of the starting size to which the target element is to be scaled. So a value of 200 would scale the target to twice its starting size, while a value of 50 would scale it to half of its starting size.

Effect-Specific Parameters

This effect has the following parameters in addition to the common parameters.

Sr.No	Option & Description
1	scaleX Sets whether the element should be scaled horizontally, defaults to true.
2	scaleY Sets whether the element should be scaled vertically, defaults to true.
3	scaleContent Sets whether content scaling should be enabled, defaults to true.
4	scaleFromCenter If true, scale the element in a way that the center of the element stays on the same position on the screen, defaults to false.
5	scaleFrom Sets the starting percentage for scaling, defaults to 100.0.
6	scaleMode Either 'box' (default, scales the visible area of the element) or 'contents' (scales the complete element, that is parts normally only visible byscrolling are taken into account). You can also precisely control the size the element will become by assigning the originalHeight and originalWidth variables to scaleMode as follows − scaleMode: { originalHeight: 500, originalWidth: 300 }

Example

Live Demo

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects" ></script>
      
      <script type = "text/javascript">		
         function ScaleEffect(element){
            new Effect.Scale(element, 150);
         }
      </script>
   </head>

   <body>
      <div onclick = "ScaleEffect(this)">
         Click me to see the result of scale function
      </div>
   </body>
</html>

This will produce following result −

scriptaculous_effects.htm