offsetTop prob - need to determine if a div is visible
 

Hi,

I have a resizable container div with overflow:hidden. If an element within the container doesn't fit completely, we want to set its visibility to hidden (rather than letting it crop). I have a function that checks offsetTop and offsetHeight to determine if an element is within the bounds of its container's visible area.

The problem I am having is that in IE, I'm getting the wrong offsetTop values on some elements that wrap. There are 4 image links in the container. If the browser is large enough, they appear on one line. As the browser shrinks, 1 or 2 of them will wrap to the 2nd line. The first element that wraps has a smaller offsetTop value than elements on the 1st line. If 2 elements wrap, the 2nd one has a correct offsetTop.

(btw, I'm also seeing an incorrect offsetHeight in mozilla, but it seems to be working anyway?!)

Can anyone shed some light on this? Is there some better way to determine if an element is completely within the visible area of its container, or am I just doing something wrong? :confused:

Thanks!
-Ann

A test page is here: Portfolio.php

And here is the pertinent bit of code:

//

// Set height of contentPanel

//

var y = y-196-50;

var panel=document.getElementById('contentPanel');

panel.style.height = y + 'px';

//

//

// Set visibility of child elements in contentPanel

//

function findPosY(obj)  // Get full top offset

{

        var curtop = 0;

        if (obj.offsetParent)

        {

                while (obj.offsetParent)

                {

                        curtop += obj.offsetTop

                        obj = obj.offsetParent;

                }

        }

        else if (obj.y)

                curtop += obj.y;

        return curtop;

}

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 top=findPosY(children[i])

                   var height = children[i].offsetHeight;

                var panelTop = findPosY(panel);

                //alert("offsetTop = " + top + " offsetHeight = " + height);

                   if ( (top+height) > (y+panelTop) )

                               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);

}