Div-Container

[Hunold]

Moin,

so, ein Projekt liegt in den letzten Zügen und da fällt mir ein, dass man doch tatsächlich ein Div-Container an- und abschalten kann.

Mittlerweile habe ich mich an diesem Thema so verbissen, dass ich die Bäume vor lauter Wald nicht mehr sehe.

Überlebenswichtig ist das nicht, es soll lediglich ein Zückerli darstellen ;-)

Wie also vorgehen?

Grüsse
Hunold

[Antje Hofmann]

Hallo Hunold,

so, ein Projekt liegt in den letzten Zügen und da fällt mir ein, dass man doch tatsächlich ein Div-Container an- und abschalten kann.

Mittlerweile habe ich mich an diesem Thema so verbissen, dass ich die Bäume vor lauter Wald nicht mehr sehe.

:-) ging mir gestern auch so.

Lösungsansätze (nicht NN 4):

Variante a)
Div wird von einem Schalter, der ausserhalb des Divbereiches liegt ein- und ausgeblendet.

Dann ist display dein Freund.

Variante b)
Div wird von einem Schalter, der im Divbereiches liegt und angezeigt werden soll, ein- und ausgeblendet.

Dann ist overflow:hidden und height: dein Freund.

Wie man mit JS drauf zugreift findest du in SELFHTML unter JavaScript/Objekte/Style.

Viele Grüße

Antje

[Hunold]

Moin Moin,

ich werde heute abend den Computer ausschalten.
Schlafen und mich morgen noch einmal dransetzen.

Mistiger Wald.

Grüüse
Hunold

[Tim Tepaße]

Hallo Hunold,

so, ein Projekt liegt in den letzten Zügen und da fällt mir ein, dass man
doch tatsächlich ein Div-Container an- und abschalten kann.

Du meinst in der grafischen Darstellung ein- und ausblenden, nehme ich an?

Wie also vorgehen?

Wie Du sicherlich schon im Kapitel »CSS / Eigenschaften / Positionierung und
Anzeige von Elementen« in SELFHTML gelesen hast, gibt es zwei Varianten, die
Sichtbarkeit eines Elementes zu beeinflussen, display und visibility.

http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display
  http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#visibility

Beide unterscheiden sich durch das Vorhandensein bzw. eben des
Nicht-Vorhandenseins eines unsichtbaren Platzhalters beim ausgeblendeten
Element. Was Dir lieber ist, bzw. welcher Einsatz bei Deiner Seite
sinnvoller ist, mußt Du entscheiden. Weswegen ich dieses Element mal zum
Verständlichmachen des Prinzip als  »sichtbarkeit« bezeichne. :-)

In Javascript kann man die CSS-Eigenschaften eines Elementes manipulieren.

http://selfhtml.teamone.de/javascript/objekte/style.htm#style_eigenschaften

In Deinem Fall, bzw. in dem von mir stark abstrahierten Beispiel sähe das
so aus:

element.style.sichtbarkeit = "an";

bzw.

element.style.sichtbarkeit = "aus";

Gucken wir uns das von hinten an. Der Eigenschaft »sichtbarkeit« wird ein
Wert zugewiesen. Zur Erinnung: »sichtbarkeit« existiert nicht, es ist nur
mein Platzhalter für entweder display oder visibility mit deren entsprechenden
Werten. »sichtbarkeit« ist hier eine Eigenschaft des Objektes »style«. Dieses
Objekt ist jedem HTML-Element eigen, es darf also vorrausgesetzt werden.

Das knackige daran ist der Platzhalter »element«. Es gibt haufenweise
Möglichkeiten, ein Element anzusprechen. Es hängt davon ab, wie obiger
Befehl aufgerufen wird, etwas, das wiederum nur Du entscheiden kannst.
Z.B. kannst Du eine Javascript-Funktion aufrufen, die etwa wie folgt
aussieht:

zeigeEbene(bezeichner) {
  document.getElementById("bezeichner").style.visibility = "visible";
}

(http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id)

Hier wird das Element über den Wert des Attributes id angesprochen, wenn
Du eine bestimmte Ebene ansprechen willst, mußt Du natürlich diesen Wert
als den Parameter »bezeichner« übergeben.

Und adäquat kannst Du eine Funktion mit dem Namen versteckeEbene(bezeichner);
basteln. Du kannst aber auch eine Funktion wechseleSichtbarkeit(bezeichner);
bauen, diese muß dann erst überprüfen, welchen Zustand die Ebene gerade
hat um dann den jeweils richtigen Befehl auszuführen.

Der Möglichkeiten sind viele. Weswegen ich auch nurso allgemein bleiben
konnte. ;-)

Tim

[Hunold]

Moin Moin,

Danke.

Nach einer erholsamen Nacht und 4 Tasse Kaffee heute morgen hat mich die Ausführung genau das gebracht, was ich gesucht habe.

So, jetzt muss ich mir nur noch Gedanken über den Text machen und dann ist es eigentlich fertig. ;-)

Grüsse
Hunold