| | |
Dynamic Resize DIV
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jul 2006
Posts: 6
Reputation:
Solved Threads: 0
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');
}
}
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');
}
}
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)
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)
ignore..
Although you set them both to be the same value in this block...
HTML and CSS Syntax (Toggle Plain Text)
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..
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:
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 >,<
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)
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 >,<
Plato forgot the nullahedron..
![]() |
Similar Threads
- How to resize a Windows 2003 partition? (Windows NT / 2000 / XP)
- Dynamic pull out menus (JavaScript / DHTML / AJAX)
- positioning a dynamic div to cover an existing table (HTML and CSS)
- Urgent.....Dynamic Changes.... (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Counting hits on a page
- Next Thread: Mac bar
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






