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


Advertisements

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.

OptionDescription
styleThe 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.



previous next Printer Friendly

Advertisements


  

Advertisements