display none/block for nested elements

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Erwin Moller - 30 Aug 2006 15:07 GMT

Hi group,

I have a rather big page with many (databasedependent) pieces of HTML.

My question boils down to the following problem (simplified):

Considering the folowwing piece of HTML:

<div id="div1" style="display:none">
<div id="div2" style="display:block">
sometextsometextsometext
</div>
</div>

document.getElementById("div2").style.display will return 'block'.

But of course, sometextsometextsometext will not be displayed because the
outer div is not visible.
All OK so far.

Question: If I have a reference to div2, and NO knowledge of parent
elements, can I find out if it is visible?

TIA

Regards,
Erwin Moller

Reply to this Message

Randy Webb - 30 Aug 2006 18:10 GMT

Erwin Moller said the following on 8/30/2006 10:07 AM:

> Hi group,
>
[quoted text clipped - 18 lines]
> Question: If I have a reference to div2, and NO knowledge of parent
> elements, can I find out if it is visible?

Yes, but you do it by determining if it is hidden or not. You check it's
parentNode, until the parentNodes have no parentNodes (while loop), to
see if any have a CSS property of display:none or visibility: hidden. If
any parentNode is visiblity:hidden or display:none then it won't be
visible. Otherwise you can make an educated guess that it is visible.

Signature

Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

Reply to this Message

Matt Kruse - 30 Aug 2006 19:59 GMT

>> Question: If I have a reference to div2, and NO knowledge of parent
>> elements, can I find out if it is visible?
> Yes, but you do it by determining if it is hidden or not. You check
> it's parentNode, until the parentNodes have no parentNodes (while
> loop), to see if any have a CSS property of display:none or
> visibility: hidden.

That won't be accurate, since CSS rules can be written which wouldn't depend
only on the parentNode chain.

Instead, use currentStyle or getComputedStyle approaches to check on the
element's state given all applied css rules.
Using the CSS.getStyle() method in the util lib at
http://www.javascripttoolbox.com/lib/util/

will do all the work for you.

Signature

Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

Reply to this Message

Erwin Moller - 31 Aug 2006 10:38 GMT

>>> Question: If I have a reference to div2, and NO knowledge of parent
>>> elements, can I find out if it is visible?
[quoted text clipped - 12 lines]
>
> will do all the work for you.

Thanks Matt and Randy.

I know how to proceed now.
Since I completely build the page, and know what elements and structure to
expect, I will try Matts approach (parent-chain).

Thanks!

Regards,
Erwin Moller

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / August 2006

display none/block for nested elements