Multiple instances of the same object interfere with each other

[Hedgehog]

Hi all,
I'm new to the group, I looked for some threads about this problem, but
never managed to find a solution, thus here is my question:

I'm coding an Animation class to give web pages the ability to move,
tween, resize and change alpha to objects (say div, img, and other DOM
nodes), the problem arises when I try to instantiate a new animation on
a different object, if I instatiate a new animation on a different HTML
object, the object animated before stops to move (or resize or
whatever), I thought it could have to do with closures, but I can't
figure out how to handle this problem, here is the code (excerpts):

----------------------------------------------
Here is the code that instatiates objects.
The animationMoveTo method requires these parameters:
(endingXCoordinate, endingYCoordinate, millisecondsForTheAnimation,
indexForTheSetInterval, intervalForTheSetInterval).
As you can see, I call the Animation constructor two subsequent times,
in this case, I can't see the aquila div object to slide into the page,
but if I delay (say with a setTimout with interval 200), the
instatiation of the second Animation (the one with sinistro as
argument), I can see the first move for just 200ms then stop and start
the animation for "sinistro", another (frustrating) note: 'sinistro'
starts the animation from the would-be arriving coordinates of the
'aquila' object:

animazioneAquila = new Animation('aquila');
larghezza = animazioneAquila.cssValue.getWidth();
sinistra = animazioneAquila.cssValue.getLeft();
dove = sinistra - larghezza;
animazioneAquila.animationMoveTo(dove, "40%", 600, 0,
100);

animazioneSinistro = new Animation('sinistro');
animazioneSinistro.animationMoveTo(0, "40%", 200, 1, 100);
----------------------------------------------------------------------
Here are excerpts from the Animation and Css classes that are
referenced by the code:

function Animation(identificativo) {

var now = (new Date()).getTime();
eval('tmp' + now + ' = this');
eval('tmp' + now + '.cssValue = new Css(identificativo)');

// MOVE OBJECTS
this.animationMoveTo = animationMoveTo;

[...]

function moveBy (dx, dy, tx, ty, index) {
var newX = eval('tmp' + now + '.cssValue').getLeft() + dx;
var newY = eval('tmp' + now + '.cssValue').getTop() + dy;
eval('tmp' + now + '.cssValue').setStyle("left", newX);
eval('tmp' + now + '.cssValue').setStyle("top", newY);
if (dx * (tx - newX) >= 0 && dy * (ty - newY) >= 0) {
return 1;
}
eval('tmp' + now + '.cssValue').setStyle("left", tx);
eval('tmp' + now + '.cssValue').setStyle("top", ty);
clearInterval(moving[index]);
return 0;
}

move = moveBy;

function animationMoveTo(tx, ty, interval, index, fluidity) {
if (typeof tx == "string") tx = checkPercentage(tx, "w");
if (typeof ty == "string") ty = checkPercentage(ty, "h");
if (typeof moving != 'undefined') {
if (typeof moving[index] != 'undefined')
clearInterval(moving[index]);
} else moving = new Array();
var iterazioni = interval/fluidity;
var dx = (tx - eval('tmp' + now + '.cssValue').getLeft())/iterazioni;
var dy = (ty - eval('tmp' + now + '.cssValue').getTop())/iterazioni;
if (dx || dy) {
moving[index] = setInterval("move(" + dx + "," + dy + "," + tx + ","
+ ty + "," + index + ")", fluidity);
}
}

[...]

function Css(identificativo) {
this.id=identificativo;

var now = (new Date()).getTime();
eval('cssVar' + now + ' = this');

// Object POsition
this.getLeft = getLeft;
this.getTop = getTop;

[...]

function getLeft() {
obj = document.getElementById(eval('cssVar' + now + '.id'));
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x) curleft += obj.x;
return curleft;
}

function getTop() {
obj = document.getElementById(eval('cssVar' + now + '.id'));
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop+= obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y) curtop += obj.y;
return curtop;
}
[...]

---------------------------------------------------------------------------

Thank you for the help, and sorry for this long post, but I can't
imagine why instatiating 2 new objects (new means new, i thought) has
this interfered bahaviour.

Hedgehog

 

[Michael Winter]

Hedgehog wrote:

[snip]

[...] new means new, i thought [...]

It does, but you're not using the objects to contain data. Instead
you're creating global variables in a way which might cause conflicts
if two objects are constructed (almost) simultaneously.

Get rid of the eval rubbish and create members properly:

function Animation(id) {
this.cssValue = new CSS(id);
}

function CSS(id) {
this.getLeft = function() {
var o = document.getElementById(id),
l = 0;

if(o.offsetParent) {
while(o.offsetParent) {
l += o.offsetLeft;
o = o.offsetParent;
}
} else if(o.x) {l += o.x;}
return l;
};
this.getTop = function() {
var o = document.getElementById(id),
t = 0;

if(o.offsetParent) {
while(o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
} else if(o.y) {t += o.y;}
return t;
};
}

It would seem that the methods of the Animation object should be added
via the prototype object as they don't necessarily seem to need to
form a closure within the constructor function. However, that
assessment might change based on the timer mechanism you use. That too
is based around global identifiers and it probably shouldn't be.

Mike