This effect is used for gradually scaling an element up or down, either vertically or horizontally. It changes an element width and height dimensions and the base for em units.
Syntax:
new Effect.Scale('element_id', percent, [options]);
or
new Effect.Scale(element, percent, [options]);
Effect Options
| Option | Description |
| scaleX | Sets whether the element should be scaled horizontally, by default its true. |
| scaleY | Sets whether the element should be scaled vertically, by default its true. |
| scaleContent | Sets whether content scaling should be enabled, by default its true. |
| scaleFromCenter | If true, scale the element in a way that the center of the element stays on the same position on the screen, by default its false. |
| 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 control the size of the element by assigning the originalHeight and originalWidth variables to scaleMode. Example: scaleMode: { originalHeight: 900, originalWidth: 900 } |
| scaleFrom | Sets the starting percentage for scaling, by default its 100.00. |
Example:
<!DOCTYPE html> <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)"> Â Â Â Â Â Â Â Â <h3>Click me to Scale</h3> Â Â Â Â </div> </body> Â Â </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Read More to that Topic: geeksforgeeks.org/script-aculo-us-scale-effect/ […]