nicht angemeldet
Methode zum "Zurückrollen" einer Funktion
Hallo zusammen,
ich habe für meine Navigation fünf verschiedene Container (div) mit JS-Funktionen versehen, die die CSS-Eigenschaften (wie width, opacity etc.) aller fünf Container jeweils unterschiedlich verändern. Um nun nach einer ausgeführten Funktion wieder zur ursprünglichen Navigation zurückzukehren, möchte ich einen Zurück-Pfeil erstellen, der die zuvor ausgeführte Funktion rückgängig durchlaufen lassen soll, dabei aber auch die transition-Einstellungen nutzen soll.
Meine Frage: Ist so etwas mit Javascript bzw. jQuery relativ kurz möglich oder muss ich eine Funktion schreiben, die alle CSS-Eigenschaften einzeln wieder auf den Ursprungswert zurücksetzen?
Danke im Voraus für eure Antworten
euer Tüftler
-
Hallo,
Ich nehme an, du setzt eine Art Akkordeon- oder Tab-Navigation um.
Wenn du Inline-Style händisch bei vielen Elementen setzt, musst du sie auch händisch wieder zurücksetzen.
Eine saubere Lösung ist hier, keine Inline-Styles zu verwenden, sondern Klassen zu togglen (hinzuzufügen und zu löschen). Die Transition kann immer noch im CSS vorgenommen werden. Es gibt dann z.B. eine Klasse für aufgeklappt/sichtbar, die hinzugefügt und wieder entfernt wird.
Das vereinfacht dir das Ändern der Darstellung, aber im JavaScript musst du immer noch den oder die letzten Status speichern, damit diese beim Drücken des Zurück-Buttons wiederhergestellt werden können. Funktionen »rückgängig laufen« zu lassen ist, sodass alle Operationen exakt rückgängig gemacht werden, ist nicht automatisch möglich.
Mathias
-
Hallo und danke für die schnelle Antwort
Ich nehme an, du setzt eine Art Akkordeon- oder Tab-Navigation um.
Nicht ganz, eher etwas Ausgefallenes.^^
Eine saubere Lösung ist hier, keine Inline-Styles zu verwenden, sondern Klassen zu togglen (hinzuzufügen und zu löschen). Die Transition kann immer noch im CSS vorgenommen werden. Es gibt dann z.B. eine Klasse für aufgeklappt/sichtbar, die hinzugefügt und wieder entfernt wird.
Ok danke für den Tipp, aber es sind leider kaum die gleichen CSS-Befehle für die Container, weshalb ich wohl auch keine Klassen dafür togglen kann (außer ich mache relativ viele Klassen, aber das ist ja nicht gewollt) oder?
Das vereinfacht dir das Ändern der Darstellung, aber im JavaScript musst du immer noch den oder die letzten Status speichern, damit diese beim Drücken des Zurück-Buttons wiederhergestellt werden können. Funktionen »rückgängig laufen« zu lassen ist, sodass alle Operationen exakt rückgängig gemacht werden, ist nicht automatisch möglich.
Ok schade, ich bin noch nicht so vertraut mit Javascript und kaum mit jQuery und dachte, dass es dafür schon vielleicht eine Art Script gebe.
euer Tüftler
-
Hallo!
es sind leider kaum die gleichen CSS-Befehle für die Container, weshalb ich wohl auch keine Klassen dafür togglen kann (außer ich mache relativ viele Klassen, aber das ist ja nicht gewollt) oder?
Das ist natürlich nicht schön, aber es spricht auch nichts dagegen. Formatierungen ins Stylesheet zu verfrachten ist immer gut, selbst wenn eine Regel im ungünstigsten Fall nur ein Element formatieren kann. Es gibt vermutlich immer noch eine Vereinfachung beim Togglen der Klassen im Vergleich zum händischen Setzen von Inline-Styles via JavaScript.
Mathias
-
-
-
Meine Herren!
Meine Frage: Ist so etwas mit Javascript bzw. jQuery relativ kurz möglich oder muss ich eine Funktion schreiben, die alle CSS-Eigenschaften einzeln wieder auf den Ursprungswert zurücksetzen?
Diese Woche gabs dazu einen Beitrag von Addy Osmani im JavaScript-Weekly-Newsletter: Detect, Undo And Redo DOM Changes With Mutation Observers. Du musst trotzdem noch sehr viel Hand anlegen, im Übrigen möchte ich auch nochmal molilys Vorschlag bekräftigen, nicht mit inline-Styles zu arbeiten. Aber diese Methode des Zurückrollens würde sowohl mit inline-Styles als auch ohne funktionieren. Ein entscheidender Nachteil, ist die fehlende Browserunterstützung bis IE10.
--
“All right, then, I'll go to hell.” – Huck Finn