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


previous next AddThis Social Bookmark Button


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 Printer Friendly

Advertisements


  

Advertisements