Web | This Site

Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# script.aculo.us Scale Effects

## Description:

This effect changes the CSS properties of an element. This takes a set of CSS properties and gradually migrates the element.s relevant style values to these targets.

This effect takes a single specific option, named style. For the sake of convenience, you can express your target style definition in three ways:

- As a CSS class name. The element will then morph toward the style specification for this class name.

- As an inline style specification (think style= attribute values).

- As a hash of CSS properties. Both official (hyphen-based) and camelized (for example, borderStyle) syntaxes are allowed for the property names.

NOTE: The original style for an element must be in its style attribute, not in an external stylesheet, for Scriptactulous to morph it.

## Syntax:

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

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

     OR

     new Effect.Morph(element, [options]);

## Effect Specific Parameters:

This effect has following parameters in addition to common parameters.

Option | Description
--- | ---
style | The target style of your element, writing with the standard CSS syntax, or as a hash

## Example:

    <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 MorphEffect(element){
           new Effect.Morph(element,
           {style:'background:#f00; color:#fff;'+
                  'border: 20px solid #f88; font-size:2em',
             duration:0.8});
           }
       </script>

    </head>
    <body>
    <div onclick="MorphEffect(this)">
        Click me to see the result of Morph Method
    </div>

    </body>
    </html>

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

Advertisement

Online Image Processing

Indian Baby Names