JavaScript Hide-Funktion mit Cookies

Jan_Kaiser · 13. Juni 2009 um 12:21

Ihr lieben,
mit JavaScript kenne ich mich leider garnicht aus.
Ich bin auch nicht son JavaScript Fan, da man es ja auch nicht unbedingt verwenden sollte,
daher werde ich es sicher nicht deshalb erlernen.

Ich hätte jedoch eine einfache Bitte,
ihr seht ja auf forum.elektrotipps.de unten in der Box “Aktuelle Informationen” rechts diese kleinen Buttons womit man eine Tabellenzeile zuklappen kann.

Nun, das System funktioniert so:
Ich habe 2 Div-Blöcke,
das, was zwischen dem einen ist, ist das was standardmäßig angezeigt wird,
das zwischen den 2 anderen DIV Tags ist das, was angezeigt wird, wenn man auf den Link (hier halt der Button) klickt.

Das ganze ist ungefähr so:

blablablabla inhalt inhalt

[color=#FF0000]

[/color]

der Inhalt zwischen diesen Tags wird angezeigt, sobald man auf den Link geklickt hat. Das ganze wird einfach ausgetauscht, nach dem klick auf den Link wird der obere DIV Block (grün) von diesem hier (rot) ersetzt. Da in diesem Fall nichts zwischen den DIV Tags steht wird logischerweise auch nichts angezeigt, dadurch wird der Inhalt eben ausgeblendet, sowie es an dieser Stelle sein sollte.

Ist der Inhalt den ihr auch jetzt direkt beim Aufrufen seht, dieser wird immer standardmäßig angezeigt, wenn man auf den Link klickt wird er vom zweiten Block (rot) ersetzt.

Nun ist es so:
Klappt mal bitte die 3 spalten in der Aktuelle Informationen Box ein, klickt dann F5.
Wie ihr seht wird nach aktualisieren der Seite das ganze wieder so angezeigt wie es Standard ist, kurz: Das, was ich hier grün markiert hab wird wieder angezeigt.

Ich weiß, dass es über Cookies eine Möglichkeit gibt.
Es soll nämlich eben so laufen, dass die JavaScript Funktion gespeichert wird.
Das bedeutet: Wenn ich in der Aktuelle Informationen Box 2 Zeilen oder so schließe und dann F5 klicke sind diese trotzdem noch geschlossen, das ganze wird eben gespeichert.

Nun ist es jedoch wichtig,
dass das ganze System mit den 2 DIV Blocks so beibehalten wird.
Ich denke man braucht auch nur was an dem JS Code zu erweitern, damit das klappt.
Wenn mir jemand helfen kann poste ich den JavaScript Teil aus meinem Code mal hier.

Liebe Grüße
Jan

Der_Admin · 13. Juni 2009 um 20:03

is php verfügbar ?
Ich nutze eine ähnliche methode für meine Boxen:
http://web-entwicklung.ath.cx
Die news box.
zuerst wir die funktion erweitert, die die Box ändert.

Also wert durch zu oder auf ersetzen und box durch die box.
Dann mit PHP das cookie abrufen und dann überprüfen ob zu oder auf und entsprechend reagieren.
Achtung ! Das path=/ muss gesetzt sein damit php dieses cookie auf jeder Seite “sieht”.

PS:
Die Lösung ist selbstgemacht und ich freu mich immer über verbesserungsvorschläge.

i.deFix · 15. Juni 2009 um 06:15

[quote=„Jan Kaiser“]…Ich bin auch nicht son JavaScript Fan, da man es ja auch nicht unbedingt verwenden sollte,…[/quote]Hä?
Wieso existiert es denn dann (noch)?
Natürlich darf, kann und sollte man JS nutzen - allerdings auf eine Art und Weise, die die Inhalte nicht vor Nutzern ohne JS-Unterstützung versteckt.

[quote]daher werde ich es sicher nicht deshalb erlernen.[/quote]Doch, genau das solltest Du - aber eben in der „richtigen“ Technik.
Eine google-Suche nach „unobtrusive JavaScript“ wird Dir da interessante Seiten ausspucken

[quote]Nun, das System funktioniert so:
Ich habe 2 Div-Blöcke,
das, was zwischen dem einen ist, ist das was standardmäßig angezeigt wird,
das zwischen den 2 anderen DIV Tags ist das, was angezeigt wird, wenn man auf den Link (hier halt der Button) klickt.[/quote]Die Lösung im obigen Sinne:

es werden (per HTML) grundsätzlich alle Boxen angezeigt.
mit JS werden dann die „nicht benötigten“ „versteckt“ (element.style.display=none;).
Für das Speichern der Einstellungen ist (wie von Dir richtig vermutet) document.cookie zuständig.
Welchen Inhalt dieses Cookie hat, ist prinzipiell wurscht - theoretisch könnte sogar der anzuzeigende Text drinnen stehen (das wäre aber der „schlechte“ Weg, weil ohne JS…).
Ich würde die ID(s) des/der anzuzeigenden Boxen dort speichern (nötigenfalls als Array) und alles außer den gespeicherten IDs ausblenden.
Natürlich innerhalb einer If-Abfrage, weil ja auch durchaus Cookies nicht existieren und/oder erlaubt sein könnten.

Jan_Kaiser · 15. Juni 2009 um 12:22

Danke für die Antworten,
kann ich das hier dann also bereits verwenden oder muss da noch was gemacht werden?

Liebe Grüße
Jan

chrisb · 15. Juni 2009 um 13:07

Solche Flags macht man nicht mit irgendwelchen Stringwerten, sondern mit true/false. (Ja, du machst damit aktuell nachher noch eine Ausgabe - aber die soll ja wohl nicht endgültiges Ziel des Scriptes sein.)

[quote]if (document.cookie) {
gespeichert = document.cookie;
} else {
document.cookie = „Zeitstempel=“ + document.lastModified;[/quote]
Das wird nur dann nicht erfüllt sein, wenn überhaupt kein Cookie existiert.
Da du aber ein Forum auf der Subdomain betreibst, gehe ich wohl davon aus, dass dieses durchaus schon Cookies setzen wird. Also wird dieses Script hier nie einen „eigenen“ Cookie setzen.

document.cookie enthält alle Cookies des aktuellen Gültigkeitsbereiches in einem String - das muss also erst mal aufgedröselt werden, wenn du an einem bestimmten Cookie interessiert bist.

Und wenn du dich nicht selber damit auseinandersetzen willst - dann google halt mal, fertige Lösungen zum komfortableren Cookie-Handling in JavaScript existieren ja durchaus bereits.