nested tabs

[horndude77]

Ok, this might be for a web designing group, but here's my problem. I'm
trying to make a web page with tabs which you can navigate between
without the page reloading. I have one set of tabs working great, but
when I add nested tabs there is a problem with the 'visibility' not
being inherited and some parts stay visible in the sub-tabs. Sorry if
this is unclear.

Here's how I have it layed out: I have a <span> for each content
section of a tab. Then I have do the same thing for the content of each
inner tab. When a tab is pressed some javascript code goes through and
makes all content sections hidden and the content section for the tab
that was pressed visible. If I select a tab and then select an inner
tab it looks like is should, but when I try and select a different tab
for the outer tabs the content for the inner section doesn't go away.
I've found that this is because visibility is not inherited. My
question is if anyone has a solution for this problem. I'm sure there
is somebody that knows of some javascript trickery to do this. Thanks
in advance.

-----Horndude77

 

[Zif]

Ok, this might be for a web designing group, but here's my problem. I'm
trying to make a web page with tabs which you can navigate between
without the page reloading. I have one set of tabs working great, but
when I add nested tabs there is a problem with the 'visibility' not
being inherited and some parts stay visible in the sub-tabs. Sorry if
this is unclear.

Gazing into her crystal ball, she cackled "Ah! There's the problem!!"

Here's how I have it layed out: I have a <span> for each content
section of a tab. Then I have do the same thing for the content of each
inner tab. When a tab is pressed some javascript code goes through and
makes all content sections hidden and the content section for the tab
that was pressed visible. If I select a tab and then select an inner
tab it looks like is should, but when I try and select a different tab
for the outer tabs the content for the inner section doesn't go away.
I've found that this is because visibility is not inherited. My
question is if anyone has a solution for this problem. I'm sure there
is somebody that knows of some javascript trickery to do this. Thanks
in advance.

Try:

comp.infosystems.www.authoring.html

but likely you will get no help there either unless you give them
something to look at - link? code?

Preferably a minimal example that displays the relevant behaviour.

 

[horndude77]

Ok someone responded to me without it being posted here that solved my
problem fine. Using 'display:none' instead of messing around with
visibility did it. Here it is (thanks):

If I understand correctly, you can fix this by changing the JavaScript
or changing the CSS.

CSS: Use 'display: none' instead of 'visibility: hidden'. display isn't
'inherited' per se, but it sort of works that way. If you set an
element's display = 'none' you also cause all of its descendant
elements to disappear. Much as if you had a cup of milk and took the
cup away, the milk would go with. If you just make the cup invisible,
it looks like you have floating milk.

The 'problem' with this is that when display is set to none, the space
for it is no longer reserved on the page. By setting something to
invisible, it still takes up space. It's still there. display won't do
that. This is more often useful than obstructive.

JS: Loop through every descendant element and set its visibility to
'hidden'. This is ugly and can cause problems related to the z-index of
the elements. i.e. If an element is supposed to be on top of other
elements and you make it invisible, it will still be there. If it
covers a link, the link will not (normally) be clickable. Also, what if
some of the elements are supposed to be hidden? When you loop through
and make them all visible, they all become visible.

 

[Zif]

Ok someone responded to me without it being posted here that solved my
problem fine. Using 'display:none' instead of messing around with
visibility did it. Here it is (thanks):

If you change the visibility of an element's parent to 'hidden', then
the element will also be hidden.

<p style="visibility: hidden;"><span>can't see me</span></p>

Why this did not occur for you is a mystery since you didn't post any
examples of where you set an element's visibility to hidden yet the
children continued to be visible.

Since you said you were using 'span' elements to wrap other elements,
it is likely you had invalid HTML and your browser made a guess at what
you wanted and displayed something that was not what you wanted.

'span' is an in-line element and may only contain other in-line
elements. But even so, invalid HTML like:

<span style="visibility: hidden;">
<table><tr><td>can't see me</td></tr></table>
</span>

still results in an invisible table in Firefox and IE.

If I understand correctly, you can fix this by changing the JavaScript
or changing the CSS.

Using JavaScript to change the properties of the elements, yes. You
can do that by changing the style rule or the element's style object
directly.

CSS: Use 'display: none' instead of 'visibility: hidden'. display isn't
'inherited' per se, but it sort of works that way. If you set an
element's display = 'none' you also cause all of its descendant
elements to disappear. Much as if you had a cup of milk and took the
cup away, the milk would go with. If you just make the cup invisible,
it looks like you have floating milk.

Changing an element's visibility to 'hidden' will also hide its
children. Your milk will still be there but you can't see it.

The 'problem' with this is that when display is set to none, the space
for it is no longer reserved on the page. By setting something to
invisible, it still takes up space. It's still there. display won't do
that. This is more often useful than obstructive.

A moot point: a DHTML menu author may have a different opinion.

JS: Loop through every descendant element and set its visibility to
'hidden'. This is ugly and can cause problems related to the z-index of
the elements. i.e. If an element is supposed to be on top of other
elements and you make it invisible, it will still be there. If it
covers a link, the link will not (normally) be clickable. Also, what if
some of the elements are supposed to be hidden? When you loop through
and make them all visible, they all become visible.

But there is no requirement to loop through them all. If elements are
properly nested, changing the visibility of the parent to 'hidden' will
hide the nested elements.

You seem to have some misunderstanding of styles and how they work in
relation to HTML, hence the suggestion that you ask your question in
c.i.w.a.html.

 

[RobB]

If you change the visibility of an element's parent to 'hidden', then
the element will also be hidden.

<p style="visibility: hidden;"><span>can't see me</span></p>

Not necessarily. The default value for CSS visibility is 'inherit', but
if it's explicitly set to something else, it will override the
containing element's rule in the cascade:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str­ict.dtd">
<html>
<style type="text/css">
p { visibility:hidden; }
span { visibility:visible; }
</style>
<head>
</head>
<body>
<p>
<strong>can't see me</strong>
<span>Yes I can...</span>
</p>
</body>
</html>

(snip)

Changing an element's visibility to 'hidden' will also hide its
children. Your milk will still be there but you can't see it.

Again, not necessarily.

(snip)

 

[Zif]

Zif wrote: [...]

If you change the visibility of an element's parent to 'hidden', then
the element will also be hidden.

[...]

Not necessarily. The default value for CSS visibility is 'inherit', but
if it's explicitly set to something else, it will override the
containing element's rule in the cascade:

[...]

Changing an element's visibility to 'hidden' will also hide its
children. Your milk will still be there but you can't see it.

Again, not necessarily.

As I said, not suitable for a JS group (at least, not my feeble CSS
skills anyhow) ;-)

Had an example been provided by the OP, whether or not that is the
actual issue could have been decided more quickly.