Divs im Div
kerstel
- javascript
Hallo,
ich habe mehrere Divs im Div:
<div id="eins">
<div id="unter_div_eins"></div>
<div id="unter_div_zwei"><div>
<div id="unter_div_drei"></div>
</div>
Wenn ich nun per Javascript das Übergeordnete Div ausblenden will, bleiben die Untergeordneten Divs angezeigt. Wie kann man das verhindern.
Gruß
Kerstel
Hi,
Wenn ich nun per Javascript das Übergeordnete Div ausblenden will, bleiben die Untergeordneten Divs angezeigt.
weder die display- noch die visibility-Eigenschaft werden vererbt.
Wie kann man das verhindern.
War das eine Frage. Indem Du die enthaltenen Elemente rekursiv ebenfalls ausblendest?
Cheatah
Hi
Wie kann man das verhindern.
War das eine Frage. Indem Du die enthaltenen Elemente rekursiv ebenfalls ausblendest?
Verzeih das ich das ? vergessen hab. Wie kann ich das machen mit rekursiv ausblenden? Hab nix gefunden um festzustellen was ein Div für unter Divs hat.
Danke
Kerstel
Hi,
weder die display- noch die visibility-Eigenschaft werden vererbt.
Sicher? Na gut, nicht vererbt, aber wenn ich den Container ausblende, ist doch auch der Inhalt weg, oder nicht?
<html>
<head>
<title></title>
</head>
<body>
<div onclick="this.style.visibility='hidden'" id="eins">
<div id="unter_div_eins">1</div>
<div id="unter_div_zwei">2</div>
<div id="unter_div_drei">3</div>
über
</div>
</body>
</html>
Grüße,
Ronny
Hi,
<html>
<head>
<title></title>
</head>
<body>
<div onclick="this.style.visibility='hidden'" id="eins">
<div id="unter_div_eins">1</div>
<div id="unter_div_zwei">2</div>
<div id="unter_div_drei">3</div>
über
</div></body>
</html>
Du hast recht so gehts. Aber irgendwie nicht wenn ich das div über ein JavaScript ausblende, da bleiben die untergeordneten divs sichtbar
Gruß
Kerstel
Hi,
Du hast recht so gehts. Aber irgendwie nicht wenn ich das div über ein JavaScript ausblende, da bleiben die untergeordneten divs sichtbar
Da stellt sich die Frage: Wie machst Du das?
Wie sieht Dein Script und Dein CSS aus?
Grüße,
Ronny
Hi,
Da stellt sich die Frage: Wie machst Du das?
Wie sieht Dein Script und Dein CSS aus?
CSS:
#eins { position: absolute; left: 10; top: 10; height: 10; visibility: visible; }
#zwei { position: absolute; left: 100; top: 10; height: 10; visibility: visible; }
#layer1 { position: absolute; visibility: hidden; }
#layer2 { position: absolute; visibility: hidden; }
#layer3 { position: absolute; visibility: hidden; }
JAVASCRIPT:
function hide_div(layer) {
document.all[layer].style.visibility="hidden";
}
function show_div(layer) {
document.all[layer].style.visibility="visible";
}
HTML:
<div id="eins">
<div id="layer1">
<a href="javascript:hide_div('layer1');">Layer 1</a>
</div>
<div id="layer2">
<a href="javascript:hide_div('layer1');">Layer 2</a>
</div>
<div id="layer3">
<a href="javascript:hide_div('layer1');">Layer 3</a>
</div>
</div>
<div id="zwei">
<a href="Javascript:show_div('layer1');">Layer 1</a>
<a href="Javascript:show_div('layer2');">Layer 2</a>
<a href="Javascript:show_div('layer3');">Layer 3</a>
<a href="Javascript:hide_div('eins');">Eins</a>
</div>
Im Div (zwei) werden die Untergeordneten divs von div(eins) angezeigt. Wird auf einen unterdiv geklickt blendet er sich wieder aus. Das funktioniert alles. Nur der letzte link um das div(eins) auszublenden geht nicht, da bleiben die unterdivs da welche eingeblendet sind.
Gruß
Kerstel
Hi,
#eins { position: absolute; left: 10; top: 10; height: 10; visibility: visible; }
Den Werten für left, top und height fehlt die Längeneinheit.
#zwei { position: absolute; left: 100; top: 10; height: 10; visibility: visible; }
hier auch.
#layer1 { position: absolute; visibility: hidden; }
#layer2 { position: absolute; visibility: hidden; }
#layer3 { position: absolute; visibility: hidden; }
JAVASCRIPT:
function hide_div(layer) {
document.all[layer].style.visibility="hidden";
}
Deine Divs sind absolute positioniert, liegen also nicht in der Box, die durch das äußere div erzeugt wird.
Also werden sie auch nicht unsichtbar geschaltet.
Daß Dein Code wegen document.all ausschließlich in IEs funktioniert, ist Dir bewußt?
cu,
Andreas
Hi,
wenn ich das position: absolute; rausnehem geht es auch nicht. Zudem brauch ich das ja um die divs zu positionieren
Gruß
Kerstel
Hi,
ich habe mal ein bisschen herum gespielt und festgestellt, dass wenn das div im div keine visibility-Zuweisung (weder über script, noch über css) hat, dann klappt es mit dem ausblenden. Sobald aber einmal die visibility gesetzt wird, geht das nicht mehr.
Jetzt habe ich das mit der Vererbung auch verstanden.
Tja, also doch alle einzeln ausblenden, wenn div "eins" ausgeblendet werden soll.
Grüße,
Ronny
Hi,
Hi,
Wenn ich nun per Javascript das Übergeordnete Div ausblenden will, bleiben die Untergeordneten Divs angezeigt.
weder die display- noch die visibility-Eigenschaft werden vererbt.
Aber (aus der Beschreibung zu display):
none
This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.
Und (aus der Beschreibung zu visibility):
hidden
The generated box is invisible (fully transparent), but still affects layout.
Das müßte m.E. auch für descendant elements heißen, daß sie nicht visible sind, denn sonst wäre die generated box nicht fully transparent...
(außer vielleicht, wenn die descendants absolute positioniert sind, da sie dann ja nicht innerhalb der Box liegen...)
cu,
Andreas