Dynamic Resize DIV

[dcarrillo18]

I have the code bellow and for some reason I have a infinite loop, but I just can't find it to fix it. I just call the function move to dynamicly resize a DIV.

var pos;
var finalPosition;
var myTimer;
var myVar;
var cnt;

function move(finalSize){
cnt=document.getElementById('contentBorder');
pos = cnt.clientHeight;
myVar = cnt.clientHeight;
finalPosition = finalSize;
resize_element(finalPosition);
}

function resize_element(size) {
if (myVar < size){
myTimer=setInterval("increaseBorder()",100);
} else if (myVar > size) {
myTimer=setInterval("decreaseBorder()",100);
} else if (myVar == size) {
} else {
alert('error from: ' + myVar + ' to: ' + size);
}
}

function increaseBorder(){
pos++;

if( pos < finalPosition ){
cnt.style.height = pos + 'px';
} else if(pos >= finalPosition){
clearInterval(myTimer);
} else {
clearInterval(myTimer);
alert('error increase');
}
}

function decreaseBorder(){
pos--;
if( pos > finalPosition ){
cnt.style.height = pos + 'px';
} else if(pos <= finalPosition){
clearInterval(myTimer);
} else {
clearInterval(myTimer);
alert('error increase');
}
}

[MattEvans]

Apologies, I didn't read your code thoroughly before posting. Ignore everything up to the first EDIT: note

ignore..

This code is checking a global variable called 'myVar'

These two functions are modifying a global variable called 'pos'

ignore..

Although you set them both to be the same value in this block...

ignore..

...they are values not references; so they wont change simultaneously.

Use the same variable in both functions, and it shouldn't go into an infinate repetition

EDIT: Actually, perhaps that's not the problem, it looks like it all should work... O_o can you find out where the loop is occuring (add some alerts or similar notifications inside the timer functions)

EDIT2: The only situation I can see where a problem could occur would be where you call move(x), then call move(y) without waiting for the first move() to finish completely: in that case, the timer myTimer will be overrwritten, and you'll lose the ability to stop it with clearInterval(). You could avoid that by always calling clearInterval(myTimer) before creating a new interval.

[MattEvans]

Hi dcarrillo18.

I made a few edits to this post this morning; they seem to have been forgotton by the system.

The problem is most likely caused when you try to call move() without waiting for a previous move() to finish. That will cause the existing timer ID to be overwritten with a new timer ID, rendering the old timer unreferencable.

The advice I put initially may help you, because checking the current pos value before starting a new timer might block timers from ever being started; but it also might make your code stop functioning after a certain condition is met...

However, I wouldn't rely on it helping solve the overwriting problem. The edit I posted earlier suggested you clear the existing myTimer before creating a new myTimer. I would certainly do that.

Something like this:

function move(finalSize){
cnt=document.getElementById('contentBorder');
pos = cnt.clientHeight;
myVar = cnt.clientHeight;
finalPosition = finalSize; 
clearInterval(myTimer);
resize_element(finalPosition);
}

If you saw the edit; ignore this post aswell as what I suggested you ignore in the original post. Otherwise, just ignore my original post >,<

[dcarrillo18]

Thank you very much, that seems to solve my problem.

[MattEvans]

That's good, I'm glad you've got it working; despite any confusion I may have caused there. =)