SPRY Slide effect change horizontal slide direction?

[Christofer]

Currently I am working on a website and I am able to alter the direction for slide from the vertical direction to the horizontal direction for the slide. Now it is opening from the left direction and then going to the right direction. The thing is that I want to alter the direction so that it will open from right and after that expand on the left, and I want to how to achieve this. In short I need help related to this SPRY Slide effect change horizontal slide direction. Any related reply will be appreciated.

[Glenny]

I am struggling to use the horizontal slide effect and I want to use the div for starting from the right and the not the traditional way from left. Is it possible to achieve, by altering or making some changes in the "SpryEffects.js" file. Here is the thing that I have tried to do for moving the thing from horizontal direction or moving from the vertical direction. If I enable the horizontal option then the element cannot be seen at the left side.
<script type="text/javascript">
var mov_hz = new Spry.Effect.Slide(movlhz, {hz: true, toggle: true});
</script>

[JonathanD]

I am also getting the similar issues and I am trying for getting the div for moving in the up direction in place of the down. I have discovered that the absolute position for the “bottom:0” that it will definitely move in the upward direction. Currently it is working for me but the thing is that I am not having any technical explanation for this behavior. Whatever may be the reason you can achieve this by changing the position of the element to zero.

[Macarenas]

Here is that solution for the problem, you can easily solve this issue through this snippet of code.

var fp = new Spry.Effect.Utils.Position();
var tp = new Spry.Effect.Utils.Position();
tp.x = fp.x = Spry.Effect.intPropStyle(element, 'left');
tp.y = fp.y = Spry.Effect.intPropStyle(element, 'top');
tp.units = fp.units;

if (slideHorizontally)
tp.x = parseInt(fp.x + direction * (fromDim.width - toDim.width), 10);
else
tp.y = parseInt(fp.y + direction * (fromDim.height - toDim.height), 10);

if (direction == 1){
var tmp = fp;
var fp = tp;
var tp = tmp;
}

fp.x += initDim.width*2;

options = {duration: durationInMilliseconds, transition: kindOfTransition, toggle:doToggle, from: tp, to: fp, fps: fps};
var move = new Spry.Effect.Move(element, fp, tp, options);
this.addParallelEffect(move);


It is this little change that makes it go the other direction.
"fp.x += initDim.width*2;"

[ThoMas321]

Well I can easily control the direction of moving whether it is moving from right to left or moving from left to right direction. Simply by positioning the moving animation elements of the container, I mean that CSS file: div.animationContainer. In the snippet of div.animationContainer there is something given that is something like position:absolute; right:6px; Now the thing is that if the container positioned with the right offset, then the contents will definitely move to right and the same behavior can be expected for the left position.

[Macarenas]

Doing lots of experiment with the provided snippet of code I get to know that I am able to move the thing from horizontal position, and if I am trying to do thing that are little bit different then the provided solution is not at all helpful. If you are saying that you are able to move it from horizontal in place of vertical then there is something that I am not having. Is there any need to download the plug-in for this purpose?

[Kalanidhi]

You just need to have a look on the attributes that are given in the SPRY effects you will notice that there are variable for the Slide Effect for the purpose of horizontal movement. I have given some of the API list so that you can better understand the thing.
1. Duration: It is used for the effects in the milliseconds.
2. From: It displays the start value for the effects
3. To: It represents the end values.
4. Horizontal: As the name suggest it is used for direction.
5. Toggle: If you want to perform an action at the time of any event or you want to set the trigger for any purpose.
6. Setup: this function is used previous to effects starts.
7. Finish: this function is used after completing of operation.