Need to resize dynamically without location.reload();

[marko_one]

Hi All, this is related to a question I posted the other day regarding scrolling Div's. I have completed this one now (thanks for any help/reading).

My page has 2 Div's on it which gets it's data from a database, the Div's are sized according to the amount of data that the database returns back. If the total amount of data in the page exceeds a certain number of rows then the divs will scroll such that the viewable document will not scroll and everything will be seen in the one page without scrolling on the main page.

To do this I go along these lines:

#################################

function setDivHeight(resize)
{
var divOneTop = document.all.topDiv.getBoundingClientRect().top;
var divOneHeight = Math.abs(document.all.topDiv.getBoundingClientRect().top - document.all.topDiv.getBoundingClientRect().bottom);
var divTwoTop = document.all.bottomDiv.getBoundingClientRect().top;
var divTwoHeight = Math.abs(document.all.bottomDiv.getBoundingClientRect().top - document.all.bottomDiv.getBoundingClientRect().bottom);
var docHeight = document.body.offsetHeight;
var maxDivView = Math.abs(docHeight - divOneTop - 30);
var maxDivHeight = maxDivView / 2 - 5;
if (divOneHeight >= maxDivHeight && divTwoHeight >= maxDivHeight)
{
document.all.topDiv.style.height = maxDivHeight;
document.all.bottomDiv.style.height = maxDivHeight;
}
else if (divOneHeight <= maxDivHeight && divTwoHeight >= maxDivHeight)
{
document.all.topDiv.style.height = divOneHeight;
document.all.bottomDiv.style.height = maxDivView - 10 - divOneHeight;
}
else if (divOneHeight >= maxDivHeight && divTwoHeight >= maxDivHeight)
{
document.all.topDiv.style.height = maxDivView - 10 - divTwoHeight;
document.all.bottomDiv.style.height = divTwoHeight;
}
else
{
document.all.topDiv.style.height = divOneHeight;
document.all.bottomDiv.style.height = divTwoHeight;
}
if (resize)
{
location.reload();
}

}

###########################################

The rules for the Div's go something like this:


1. if both Divs are > maxDivHeight, then set thier heights to be maxDivHeight.

2. if one Div < maxDivHeight then set Div(1) to actual Height and set the other to the remainder of the document view

3. if both are < maxDivHeight then set Div's to actual height.


Now comes my problem.

When you resize this page to make it smaller it works fine and sets scrolling appropriately, but if you then make the page larger it doesnt resize the div's and leaves them at thier small size.

I would really like to be able to do this without using location.reload();

Any Ideas?

See the zip file (try.html) to have a look at the code in full

Thanks

Marko

[Khalid Ali]

use
window.onresize
event