Ihr lieben,
ich habe mir aus mehreren Codes bzw. mehreren Ideen eine Show/Hide Funktion gebastelt.
Ich sage gleich dazu:
Die ganze ist teilweise von mir.
Ich habe aus mehreren Grundlagen etwas zusammengebastelt.
Nun ansich funktioniert das ganze soweit.
Einzigstes Problem ist:
Wenn man auf “Verstecken” klickt, dann versteckt sich zwar das gewünscht,
wie es sein soll.
Nachteil: Der Kram darunter rutscht nicht nach oben.
Angenommen ich möchte eine Tabelle mit 500 Pixeln Höhe verstecken,
das mit dem Verstecken geht soweit, jedoch habe ich dort dann 500 Pixel leere Fläche.
Das ganze soll eben so sein, dass alles darunter (z.B. der Footer) nachrutscht.
D.h. wenn darunter noch ein Footer wäre, würde dieser 500 Pixel nach oben rutschen,
wenn die Tabelle versteckt ist.
Ist etwas schwer zu erklären, hoffe ihr versteht es.
@ wccw: Ich denke das bringt nicht wirklich was, wenn die Tabelle oder der DIV noch einen Inhalt hat, den selbst wenn du einer Tabelle eine Höhe von 20px zuweist wird sie höher wenn du ein Bild mit 30px Höhe einbindest.
Ich würde dir so ein Script vorschlagen, das den DIV versteckt und von Inhalten befreit:
function close(pageElement) {
document.getElementById(pageElement).style.visibility='hidden';
document.getElementById(pageElement).innerHTML = "";
}
Wenn ich da auf “Show/Hide” klicke,
dann ist der Text einfach nur ausgeblende, aber ein riesiger Leerraum.
Es sollte aber so sein, dass wenn der Text ausgeblendet ist der Footer (ganz unten) dann nach oben rutscht.
[quote=“amityville”]Hast du das mit der Javascriptfunktion mal ausprobiert?
Ich denke wenn kein Inhalt mehr vorhanden ist, nimmt das DIV auch keinen Platz mehr ein![/quote]
Ja, habe ich. Habe das mit hinzugefügt.
Hat aber noch keine Änderungen gemacht.
Hier mal ein kleines schnell angefertigtes Beispielscript ohne Formatierungen. Kopiers einfach in ne leere HTML-Datei und schaus dir an:
<html>
<head>
<title>Show-Hide</title>
<script type="text/javascript">
function close(pageElement) {
document.getElementById(pageElement).style.visibility='hidden';
document.getElementById(pageElement).innerHTML = "";
}
</script>
</head>
<body>
<div><a href="javascript:close('vieltext');">close</a></div>
<div id="vieltext">
Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>
</div>
<div>endlich bin ich oben</div>
</body>
</html>
Zur Erklärung:
das div mit der id: vieltext soll verschwinden
das div wo drinne steht: endlich bin ich oben… soll nach oben wandern
die javascriptfunktion close() wird durch den link im ersten div aktiviert
habs lokal getestet, bei mir hats geklappt
[quote=“amityville”]Hier mal ein kleines schnell angefertigtes Beispielscript ohne Formatierungen. Kopiers einfach in ne leere HTML-Datei und schaus dir an:
<html>
<head>
<title>Show-Hide</title>
<script type="text/javascript">
function close(pageElement) {
document.getElementById(pageElement).style.visibility='hidden';
document.getElementById(pageElement).innerHTML = "";
}
</script>
</head>
<body>
<div><a href="javascript:close('vieltext');">close</a></div>
<div id="vieltext">
Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>Das ist viel Text.<br>
</div>
<div>endlich bin ich oben</div>
</body>
</html>
Zur Erklärung:
das div mit der id: vieltext soll verschwinden
das div wo drinne steht: endlich bin ich oben… soll nach oben wandern
die javascriptfunktion close() wird durch den link im ersten div aktiviert
habs lokal getestet, bei mir hats geklappt[/quote]
An dich nochmal besonderen dank.
Habe das natürlich gelesen und finde es wirklich nett von dir.
So kann ich das auch mal für die Zukunft lernen,
dennoch habe ich es jetzt schnell mit einem anderen Code versucht.
Vielen dank, für die lange Erklärung und Beschreibung des ganzen.
Immer wieder gerne, denn aus den meisten Problemen die hier erörtert werden kann man selbst noch was lernen, kannst ja wenn de Zeit hast bissl mit den Code-Schnipseln rumspielen
Ich wuerde euch vorschlagen, solch einen Unfug bleiben zu lassen - und euch stattdessen mal ein bisschen mit CSS zu beschaeftigen, so dass euch wenigstens der Unterschied einer Ausblendung ueber visibility (“mit Platzhalter”) und display (ohne) klar waere.
