Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
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.
|
|
|