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 mozilla, but not in IE.

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

Thanks!
-Ann

Test pages:
http://indigopear.com/Clients/vanduuren/Home.php
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);
}

simply using

container {
overflow:hidden;
}

would work for me I think

Thanks for the reply, Chris. Setting overflow:hidden will simply crop any elements that don't fit in the container - the behavior we're after is to have cropped elements disappear altogether. The part I'm having trouble with is determining if a child element is getting cropped. ..

Thanks,
-Ann

I'm not sure if this is it, but I've noticed that in IE you need to explicity use var whenever first defining a variable. Seems like you do that everywhere except at the top for y = y-196-50;

I'm grasping I think, but also hoping that those 3 letters out front might fix things in IE.