Copyright © tutorialspoint.com

script.aculo.us Move Effects

previous next


Advertisements

Description:

This effect moves an element. Its older version has name Effect.MoveBy

In order for this effect to work correctly across all browsers, the element to be moved must be a positioned element. That is, it must have a CSS position rule applied, and the value of the position may be either of absolute or relative.

Syntax:

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

 new Effect.MoveBy('id_of_element', {x, y, mode, [options]});

 OR

 new Effect.MoveBy(element, {x, y, mode, [options]});

Effect Specific Parameters:

This effect has following parameters in addition to common parameters.

OptionDescription
x-coordinateThis specifies the change in horizontal position. A negative x value moves the element to the left.
y-coordinate This specifies the change in vertical position. A negative value moves the element "up" the page.
modeThis specifies the positioning mode of the element. It can be either absolute or relative. By default its relative

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 MoveEffect(element){
       new Effect.MoveBy(element, {x:10,y:10,duration:1})
   }
   </script>
</head>
<body>
<div onclick="MoveEffect(this)">
    Click me to see the result of Move Method
</div>

</body>
</html>

This will slowly move the target element down and to the right by 10 pixels each.

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


previous next

Copyright © tutorialspoint.com