C
ckirchho
Hallo,
please take a look at http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm.
When the window is resized, the JavaScript does two things:
- adjust the height of the DIV that contains the treeview
- adjust the size of the image on the right side
In IE 6, neither of that is done correct. My initial problem was to
tell IE 6 in CSS that the left column DIV (#left) should span over the
whole height of the window. I did that with "position: absolute; top:
0; bottom: 0;"
But I learned that that's not possible in IE 6, and that I instead
should use
* html body {
height: 100%;
}
* html body #left {
height: 100% !important;
}
The height of the treeview, in order to fill up the remaining space,
is the height of the outer DIV minus the height of the "toolbar", and
optional the height of a search form that is toggled on and off with
the magnifying glass on the toolbar.
The resizing code:
function resizeTree() {
leftEl = getElById('left');
if (leftEl == null) return;
toolbarEl = getElById('toolbar');
if (toolbarEl == null) return;
searchEl = getElById('search');
if (searchEl == null) return;
treeEl = getElById('tree');
if (treeEl == null) return;
newHeight = leftEl.offsetHeight - toolbarEl.offsetHeight -
searchEl.offsetHeight;
treeEl.style.height = newHeight + 'px';
}
This works in Firefox and IE 7. In IE 6 the following happens:
- After initially loading the page, the size of the tree is correctly
adjusted.
- When increasing the height of the window, the size is adjusted as
well
- When decreasing the window height, the tree is not adjusted. The
leftEl.offsetHeight always contains the maximum height it has ever
reached. It won't be decreased if you decrease the windows height
again, it only gets bigger as soon as you increase the height over the
last maximum value.
- When I toggle on the searchform, the height of the #left div
increases as well, and the tree is pushed down in order to give space
for the search form, but the tree's height is not adjusted. Or better:
It seems to be adjusted, but the #left div's height is just too big.
Please forgive me if this is a CSS issue and I am wrong here, but
maybe somebody has an idea how to correct this in JavaScript.
Best regards,
Christian Kirchhoff
please take a look at http://www.digitale-bibliothek.de/Maschinentechniker/METS2a/index.htm.
When the window is resized, the JavaScript does two things:
- adjust the height of the DIV that contains the treeview
- adjust the size of the image on the right side
In IE 6, neither of that is done correct. My initial problem was to
tell IE 6 in CSS that the left column DIV (#left) should span over the
whole height of the window. I did that with "position: absolute; top:
0; bottom: 0;"
But I learned that that's not possible in IE 6, and that I instead
should use
* html body {
height: 100%;
}
* html body #left {
height: 100% !important;
}
The height of the treeview, in order to fill up the remaining space,
is the height of the outer DIV minus the height of the "toolbar", and
optional the height of a search form that is toggled on and off with
the magnifying glass on the toolbar.
The resizing code:
function resizeTree() {
leftEl = getElById('left');
if (leftEl == null) return;
toolbarEl = getElById('toolbar');
if (toolbarEl == null) return;
searchEl = getElById('search');
if (searchEl == null) return;
treeEl = getElById('tree');
if (treeEl == null) return;
newHeight = leftEl.offsetHeight - toolbarEl.offsetHeight -
searchEl.offsetHeight;
treeEl.style.height = newHeight + 'px';
}
This works in Firefox and IE 7. In IE 6 the following happens:
- After initially loading the page, the size of the tree is correctly
adjusted.
- When increasing the height of the window, the size is adjusted as
well
- When decreasing the window height, the tree is not adjusted. The
leftEl.offsetHeight always contains the maximum height it has ever
reached. It won't be decreased if you decrease the windows height
again, it only gets bigger as soon as you increase the height over the
last maximum value.
- When I toggle on the searchform, the height of the #left div
increases as well, and the tree is pushed down in order to give space
for the search form, but the tree's height is not adjusted. Or better:
It seems to be adjusted, but the #left div's height is just too big.
Please forgive me if this is a CSS issue and I am wrong here, but
maybe somebody has an idea how to correct this in JavaScript.
Best regards,
Christian Kirchhoff