DIV-Layer so einfügen, dass bei visible alles...: ... Nachfolgende verrückt wird? (HTML, CSS und Javascript)

[thread]2229[/thread]

DIV-Layer so einfügen, dass bei visible alles...: ... Nachfolgende verrückt wird?

oruebe

2004-12-20 10:18

User since
2004-07-09
46 Artikel
BenutzerIn
[default_avatar]

Hallo,

wie kann ich einen DIV-Layer so einbinden, dass bei hidden der nachfolgende "kram" direkt anschliesst (ohne leere Zwischenräume) und bei vissible dieser "eingefügt" wird und alles Nachfolgende dann nach unten verschoben wrd? Also angenommen ich habe einen text1 und einen text2. Diese beiden Texte sollen DIREKT untereinander erscheinen. Nun soll unter bestimmten Voraussetzungen ein Layer ZWISCHEN diese Texte eingefügt werden. Wie mach ich das, dass bei erscheinen des Layers (visible) der Text 2 nach unten rutscht?

Schon mal Danke und Gruß,
Oliver

ptk

2004-12-20 12:18

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

Man koennte das mit DOM-Manipulation machen:

Code: (dl )

<html>
<head>
<title>Test</title>
<script>
var savedElement;
function toggle() {
  var elem = document.getElementById("zwei");
  if (elem) {
    savedElement = elem.parentNode.removeChild(elem);
  } else {
    var container = document.getElementById("container");
    var drei = document.getElementById("drei");
    container.insertBefore(savedElement, drei);
  }
}
</script>
</head>

<body id="container">
<div><a href="javascript:toggle()">Toggle</a></div>
<div id="eins">Eins</div>
<div id="zwei">Zwei</div>
<div id="drei">Drei</div>
</html>

oruebe

2004-12-20 18:44

User since
2004-07-09
46 Artikel
BenutzerIn
[default_avatar]

Hallo ptk,

danke für die Antwort. Ich werde das mal ausprobieren. Auf den ersten Blick verstehe ich den Sinn allerdings noch nicht. Ich muss mich da erst reinfuchsen :-)

Ich habe Deine Version erstmal 1:1 kopiert. Die 2 verschwindet auch aber bei erneutem Klick erscheint sie nicht wieder. Wie gesgt: Im Moment durchschaue ich das aber noch nicht...

ptk

2004-12-20 18:54

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

Moeglicherweise funktioniert das nur mit korrekten Browsern, also mit Mozilla und Opera (beides unter Linux getestet) und nicht mit dem MSIE. Das Prinzip ist einfach: mit removeChild wird der Node aus dem Dokument geloescht und in der Variablen savedElement gemerkt. Mit insertBefore wird der Node wieder eingefuegt.

ptk

2004-12-20 19:01

User since
2003-11-28
3645 Artikel
ModeratorIn
[default_avatar]

Mit MSIE 6.0 geht es auch.

oruebe

2004-12-20 19:15

User since
2004-07-09
46 Artikel
BenutzerIn
[default_avatar]

Habe auch MSIE6.0. Bei mir gehts nicht :-(

View all threads created 2004-12-20 10:18.