[CSS] Div container unsichtbar machen

[Forumsgast]

Hallo Leute,

ich habe ein Div container, der "viele" weitere div container enthält! Jetzt möchte ich diesen Div unsichtbar machen, und alle dadrunter liegenden auch. Und dieses Div soll möglich klein skaliert werden, sodass er kein Platz einnimmt! Geht das?

Gruß Dima

[Forumsgast]

was spricht denn gegen "visibility:hidden" oder "display:none" ?

[Forumsgast]

Beides probiert, trotzdem wird alles dargestellt!

[Forumsgast]

Ok ich habe scheiße gebaut! jetzt gehts!

[Forumsgast]

woran lags? was wolltest du damit erreichen?

[Forumsgast]

Hallo dsmcg,

Ich programmiere zur Zeit ein Verwaltungssystem! In diesem Verwaltungssystem kann man Ordner und Dokumente anlegen. Nun, in Dokumenten kann man Beiträge eintragen. Wenn man nun ein Beitrag schreibt, gibts es eine Vorschau von den Beiträgen. Diese Vorschau habe ich so programmiert: Ich habe 2 div Container benuzt. Der eine davon ist unsichtbar, und enthält die aufgelisteten Beiträge. Sezt man nun ein Häckchen bei "Liste aller Beiträge anzeigen" (checkBox) dann wird der Inhalt des unsichtbaren Containers einfach per JavaScript in den sichtbaren Container kopiert, und der User kann die Liste sehen. Macht er das Häckchen weg, so wird der Inhalt des sichtbaren Containers gelöscht.
Ich habe das versucht anders zu lösen, und zwar habe ich per PHP die Liste in die JavaScript Funktion direkt hineingeschrieben. (<script ....>... var content = "<?php echo($listItems()); ?>";...</script>) Das ging nicht, obwohl der dadurch erzeugte Quellcode korrekt war! (Nach aufruf der Seite). Deswegen habe ich eine andere Lösung gesucht. Ich habe auch versucht den inhalt direkt in den container zu schreiben, danach einfach per JavaScript diesen Container auszulesen und den Inhalt in einer Variable zu speichern, aber es ging wieder mal nicht "auszugeben".

Woran lag es dass der erste Container "sichtbar" war, obwohl ich ihn unsichtbar gemacht habe? Nun ich habe gestern wohl zu lange am Rechner gessesen, und wegen Übermüdung irgendwie vergessen im Div container die Klasse zuzuteilen (class="..."). Das war natürlich der Grund wieso es nicht ging!

Gruß Dima

[Forumsgast]

hmm und wie hast du es den schluss endlich lösen können? nimmt mich jetzt wunder :P

gibts keinen Code dazu?

[Forumsgast]

Ok, HeHe! Die Idee kam mir gestern Abend ...
listItems() brauche ich ja nicht auszuführen

Ausgabe:

<?php
...
<div id="viewCont" class="unvisibleDiv">'.listItems().'</div>
<div id="view"></div>
...
?>

Div Container:

/* Unsichtbarer Div Container */
div.unvisibleDiv
{
height:0; width:0;
display:none;
visibility:hidden;
border:10px solid #FFFFFF;
}

JavaScript Funktion

<script language="javascript">
var viewOpen = false;

function changeView()
{
	if(viewOpen)
	document.getElementById("view").innerHTML = '';
	
	else
	document.getElementById("view").innerHTML = document.getElementById("viewCont").innerHTML;

	viewOpen = !viewOpen;
}
</script>

"Button" zum klicken

<input type="checkbox" value="1" onClick="javascript: changeView()">

Alles klar?

Gruß Dima

[Forumsgast]

alles klar, danke

[Forumsgast]

Kennst du eine bessere Lösung wie man sowas machen könnte?

Gruß Dima

[Forumsgast]

gab mich damit noch nie befasst und javascript ist nicht wirklich mein Gebiet, aber ich denke wenn jemand ne bessere Lösung bereit hat, wird der sich schon melden

[Forumsgast]

Ok Danke
JavaScript ist auch nicht mein Gebiet, ist aber halt sehr simpel!

[Forumsgast]

habs gleich mal getestet, also bei mir (zumindest im IE 6) wird erstmal einfach ne Checkbox angezeigt, darunter der DIV-Container mit dem sichtbaren Text.
Das ist auch gut so

Jetzt aktiviere ich die Checkbox, und der Text(sichtbare) wird ersezt durch den unsichtbaren), ich dachte er soll dran gehangen werden?!

Wenn man jetzt die Checkbox wieder deaktiviert, sehe ich gar nix mehr.

Wenn ich jetzt die Checkbox erneut aktiviere wird einfach wieder der unsichtbare Text abgezeigt,

[Forumsgast]

Warum einfach, wenns auch umständlich ist?

<button onclick="divShowHide(this, 'msgs');">Show Text<button>
<div id="msgs" style="display:none;">
Viel viel Text

Viel viel Text

Viel viel Text

Viel viel Text

</div>
<script type="text/javascript">
function divShowHide(btn, id) {
  var obj = document.getElementById(id);
  if (obj.style.display == 'none') {
    obj.style.display = 'block';
    btn.innerHTML = 'Hide Text';
  } else {
    onj.style.display = 'none';
    btn.innerHTML = 'Show Text';
  }
}
</script>

[Forumsgast]

WoW Man kann mit JavaScript auf Objekt Eigenschaften zugreifen, sprich CSS! Das wusste ich nicht ..
Danke für den code