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 Move Effects

## 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.

Option | Description
--- | ---
x-coordinate | This 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.
mode | This 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.

Advertisement

Online Image Processing

Indian Baby Names