Tutorials Point

  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

script.aculo.us Scale Effects

previous next AddThis Social Bookmark Button



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


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

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


 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 following parameters in addition to common parameters.

scaleXSets whether the element should be scaled horizontally, defaults to true.
scaleYSets whether the element should be scaled vertically, defaults to true.
scaleContentSets whether content scaling should be enabled, defaults to true.
scaleFromCenterIf true, scale the element in a way that the center of the element stays on the same position on the screen, defaults to false.
scaleFromSets the starting percentage for scaling, defaults to 100.0.

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 }


<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   <script type="text/javascript" 
   <script type="text/javascript">
   function ScaleEffect(element){
       new Effect.Scale(element, 150);
<div onclick="ScaleEffect(this)">
    Click me to see the result of scale function


To understand it in better way you can Try it yourself.

previous next Printer Friendly