Dynamic Resize DIV

Reply

Join Date: Jul 2006
Posts: 6
Reputation: dcarrillo18 is an unknown quantity at this point 
Solved Threads: 0
dcarrillo18 dcarrillo18 is offline Offline
Newbie Poster

Dynamic Resize DIV

 
0
  #1
Feb 24th, 2007
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');
}
}
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Dynamic Resize DIV

 
0
  #2
Feb 26th, 2007

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

HTML and CSS Syntax (Toggle Plain Text)
  1. ignore..

This code is checking a global variable called 'myVar'

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

HTML and CSS Syntax (Toggle Plain Text)
  1. ignore..

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

HTML and CSS Syntax (Toggle Plain Text)
  1. 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.
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Dynamic Resize DIV

 
0
  #3
Feb 26th, 2007
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:
HTML and CSS Syntax (Toggle Plain Text)
  1. function move(finalSize){
  2. cnt=document.getElementById('contentBorder');
  3. pos = cnt.clientHeight;
  4. myVar = cnt.clientHeight;
  5. finalPosition = finalSize;
  6. clearInterval(myTimer);
  7. resize_element(finalPosition);
  8. }

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 >,<
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 6
Reputation: dcarrillo18 is an unknown quantity at this point 
Solved Threads: 0
dcarrillo18 dcarrillo18 is offline Offline
Newbie Poster

Re: Dynamic Resize DIV

 
0
  #4
Feb 26th, 2007
Thank you very much, that seems to solve my problem.
Reply With Quote Quick reply to this message  
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Dynamic Resize DIV

 
0
  #5
Feb 26th, 2007
That's good, I'm glad you've got it working; despite any confusion I may have caused there. =)
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC