1. Registered User
Join Date
Nov 2003
Posts
262

## Math equation?

Hi there, I'm moving an element using the draggable UI from jquery.
With the drag event I get the left value of the element dinamically while I do the dragging. Afterwords, I use animate to give this values to the left css value of another element so it moves as much as the dragged one.
This works fine, but I would like this element to move at a different speed than the dragged...
Sounds easy but:
Let's say I want the second element to move 1'5 pixels for every pixel the dragged one moves, this seems to be as simple as multiplying:
function onDrag()
{
var moving = #('dragged').offset().left*1.5;
\$('#moveme').animate({'left' : (moving) + 'px'}, 0);
}

The problem is:
When you do this, the \$('#moveme') element moves exactly at the perfect spped, but it start's it's movement in the first offset().left value og \$('#dragged') so there is a jump. I would like it to move at the same speed but from it's own offset().left starting position.
I can't find the way to express this in a Math's function without causing a mess. Any help?

2. Registered User
Join Date
Sep 2009
Posts
146
the problem is your moving the #moveme element relative to the #dragged elements 'left'. It will move the 1.5x the #dragged, but when the function gets called again its starting position is #dragged current 'left' not the #moveme 'left'. At the same time im assuming you dont know the frequency this function is triggered (every 1px? movement...)

you could collect the original starting position (when users clicks to drag) and then do the math referring to that as the start point. from there that math is easy.

but i think the better way would be to figure out the interval that the function is being called:

Code:
```var intervalCollector = 0;
function onDrag() {
var howMuchHasItMoved = \$('#dragged').offset().left-intervalCollector;//take the current left and subtract the previous left and you know how many px its moved
var moving = \$('#moveme').offset().left+(howMuchHasItMoved * 1.5);//then using its own 'left' value add the number of px its moved * 1.5
\$('#moveme').animate({'left' : (moving) + 'px'}, 0);
intervalCollector = \$('#dragged').offset().left;//this will get the left position and store it in a glob VAR so that on next run we can see how far the container has moved
}```
i am positive you are going to get some odd results on the first run because intervalCollector will have a value of 0, you need to set intervalCollector on the click even of the window grab or something like that, but this should get you somewhere?

global vars in JS is usually a very bad thing, but it all depends how tired/lazy/under paid you are :-)

-aPeg
Last edited by apeg; 05-10-2010 at 03:43 PM.

3. Registered User
Join Date
Nov 2003
Posts
262

## Some questions!

Thanks a lot apeg, I'm going to try this.
Regarding your guessings, I'm the worst payed one in the world...
One question:
Why is it bad to have global vars in JS and how do you manage to avoid them?

Thanks a lot again!

4. Registered User
Join Date
Sep 2009
Posts
146
i am sure there is a more technical reason... but for me global vars in JS are a bad thing because you can lose control of them very quickly. In Js when you declare a variable outside of a function it can be used as a global variable... and now you have to keep track of that variable throughout your ENTIRE script.

one, two isn't a problem... but depending on how big you script gets one, two can turn into ten, fifteen. And thats where you can lose control.

I'm sure one of the experts out there can give you the real technical reasons, but for me its all about organization.

I code in a way that i wont need global vars, but sometimes there is no way to avoid them, and you cant do anything about it until you start getting into class structure... from there you can keep globals inside the class and access them through a class function that do nothing else but return the value of the variable.

I am not pro when it comes to details like this so, absorb at own risk lol

-aPeg
Last edited by apeg; 05-11-2010 at 11:49 AM.