Getting position & visibility of an element

[indigopear]

Hi,

I'm working on a site that has a resizable div. On 2 of the pages, elements within that container div should become invisible (rather than scrolling or cropping) if they are not completely within the visible area of the container.

I've got a function that uses offsetTop and offsetHeight to figure out if each child is within bounds, and toggles the visibility property. It works in firefox, but not in IE.

Can anyone see what I'm doing wrong here? Is there a better way to do this?

Thanks!
-Ann

Test page:
http://indigopear.com/Clients/vanduuren/Portfolio.php

And here's the script:

// Set height of contentPanel
//
y = y-196-50;
var panel=document.getElementById('contentPanel');
panel.style.height = y + 'px';
//
//
// Set visibility of child elements in contentPanel
//
function setVisibility(node, y, panel) {
var children=node.childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].className && (children[i].className == 'toggle' || children[i].className.search('toggle'))) {
var parent = children[i].offsetParent;
var top = children[i].offsetTop;
var height = children[i].offsetHeight;
alert("offsetTop = " + top + " offsetHeight = " + height + " panel height = " + y + " panel offsetTop = " + panel.offsetTop);
if ( (top+height) > (y+panel.offsetTop) )
children[i].style.visibility = 'hidden';
else
children[i].style.visibility = 'visible';
}
else
setVisibility(children[i], y, panel);
}
}
if (panel.className == 'noScroll') {
panel.style.overflow = 'hidden';
setVisibility(panel, y, panel);
}

[jscheuer1]

I'm having a little trouble following all this but, your typical scrollHeight for one of the toggle class objects is 22 in FF 162 in IE, that could be a problem.