HTML and CSS

offsetTop prob - need to determine if a div is visible

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2006

Posts: 1

Reputation: indigopear.com is an unknown quantity at this point

Solved Threads: 0

indigopear.com indigopear.com is offline

Offline

Newbie Poster

offsetTop prob - need to determine if a div is visible

Mar 23rd, 2006

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?

Thanks!
-Ann

A test page is here: Portfolio.php

And here is the pertinent bit of code:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
//
// 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);
}
//
// 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);
}