How to detect actual visibility of an element

Hi Guys,

This the first question I am putting on the forum. Hope you all will give it a try.

I have an inputbox in my code. And sometimes I happen to hide some great grand parent node of the input box. ie, I will just hide the table or div element in which there will be lots of child nodes which again contians lots of child nodes and ... like that... and some where inside, my inputbox will be present.

I hide the great grand parent node using someElement.style.display="none";

So when I hide the great grand parent node all the content underneath will become invisible. But the actuall properties of the child nodes will be the same. ie, the actual display property of the input box is still visible.

Very funny na... the input box is hidden to our eyes but it seems to be visible to the code.

Now what I want is, how to detect actuall visibility( that which we will see) of an element. How can I know if the element is actually visible to the eye or not.

Please dont tell me to use "myinputbox.style.display" or "myinputbox.style.visibility". They all show visible but in reality inputbox is hidden because its greatgrandparent is hidden.

Awaiting for answers...

Thanking you in advance.

Afru

Let us see how many gurus can answer this.....

trolling are we?? ;)

Hello Jbot,

Nice humour.... Ok. I am removing that line.... Still waiting for an answer friend.... :)

Afru

Why not do it recursively?

First, you need accurate detection of visibility (not just set inside the style property):


function isVisible(element) {
var styleObj;

if (document.defaultView && document.defaultView.getComputedStyle)
styleObj = document.defaultView.getComputedStyle(element, "");
else if (element.runtimeStyle)
styleObj = element.runtimeStyle;

return !(styleObj.display == "none" || styleObj.visibility == "hidden");
}


Now we simply do something like:

function isRendered(element) {
if (element.nodeType != 1) return true;
if (isVisible(element))
return isRendered(element.parentNode);
return false;
}


I didn't test the code, but I don't see any reason why it won't work.

Hello JKD,

Thanks a lot for your time, I have also thought of recursive function but it didnt work. Thats why I posted the problem on the forum. I tried your version of the function but it is still saying that my elements are visible even when their parentNodes are invisible.

I tried following code and always got true when clicked on getVisibility button.
Please checkit out...

<SCRIPT LANGUAGE="JavaScript">
<!--
function isVisible(element) {
var styleObj;

if (document.defaultView && document.defaultView.getComputedStyle)
styleObj = document.defaultView.getComputedStyle(element, "");
else if (element.runtimeStyle)
styleObj = element.runtimeStyle;

return !(styleObj.display == "none" || styleObj.visibility == "hidden");
}

function isRendered(element) {
if (element.nodeType != 1) return true;
if (isVisible(element) && element.parentNode)
return isRendered(element.parentNode);
return false;
}

function hideRow()
{
rowObj=document.getElementById("mytr");
rowObj.style.display="none";
}
function showRow()
{
rowObj=document.getElementById("mytr");
rowObj.style.display="block";
}
function alertVisibility()
{
obj=document.getElementById("myinputbox");
alert(isRendered(obj));
}
//-->
</SCRIPT>

<TABLE border=1 cellpadding=0 cellspacing=0>

<TR id="mytr" name="mytr">
<TD>
<input type="text" value="Some Value" id="myinputbox" name="myinputbox">
</TD>
</TR>

<TR><TD>

<input type="button" value="Hide Table Row" onclick='hideRow()'>&nbsp;&nbsp;

<input type="button" value="Show Table Row" onclick='showRow()'>&nbsp;&nbsp;

<input type="button" value="Get Visibility" onclick='alertVisibility()'>

</TD></TR>
</TABLE>

Hope you will find out what is the problem....
By the way I am using IE6.0 hope its not the problem. I have also checked this on IE5.5 but didnt get it.

Awaiting for your reply...

Afru.

Use currentStyle not runtimeStyle

This question has been continued here (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=42705).....

......Willy

Use currentStyle not runtimeStyle

both of those are IE only. for Moz you also need to use getComputedStyle():

window.getComputedStyle(HTMLElement, null).getPropertyValue(STYLE_PROPERTY);

Hello all,

Thank you all of you here...
You people are simply the best...
Thanks a lot...

Afru.