RSS Forums RSS

offsetTop prob - need to determine if a div is visible

Please support our HTML and CSS advertiser: Programming Forums
Reply
Posts: 1
Reputation: indigopear.com is an unknown quantity at this point 
Solved Threads: 0
indigopear.com indigopear.com is offline Offline
Newbie Poster

Help offsetTop prob - need to determine if a div is visible

  #1  
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:

//
// 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);
}
AddThis Social Bookmark Button
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.



Similar Threads
Other Threads in the HTML and CSS Forum
Views: 6398 | Replies: 0 | Currently Viewing: 1 (0 members and 1 guests)

 

Thread Tools Display Modes
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 1:08 pm.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC