Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Zustand im einfachen Aufklappmenü speichern

Hallo Florian,
gibt es eine einfache Art den Zustand des folgenden Aufklappmenüs zu speichern?
Im Buissenes-Template werden hier auch die Kategorien ein- und ausgeblendet.
Ich wollte es für die Symbolbar einsetzen. Für mehr...
function clip (id) {
if (document.getElementById("span_" + id).style.display == 'none') {
document.getElementById("span_" + id).style.display = "block"; }
else {
document.getElementById("span_" + id).style.display = "none"; } }
</script>
Hier kommt der Link zum Auf- und Zuklappen:
<a href="javascript:clip(1)">Klapptext</a>
Text +++ Text
<span id="span_1" style="display:none">
<br>
+++ Zu versteckender Text +++
<br><br>
Hier kommt der Link zum Zuklappen (für lange Texte und große Bilder):
<a href="javascript:clip(1)">Zurück</a></span
Viele Grüße und besten Dank
Wolfgang

Hallo Wolfgang,
ich schätze mal, dass diese Funktion im Grunde das gleiche sein wird wie in toggos Beitrag.
Vielleicht kannst du es ja mit dem Skript dort auch mal versuchen:
Div durch Link mit Cookie ausblenden
Du hast eben nur einen anderen Namen für die Klappfunktion und SPANs statt DIVs.
Aber evtl. kannst du das Skript noch etwas nach deinen Vorstellungen anpassen, die Funktionalität müsste soweit gegeben sein.
Im Original-Skript sind die Plus- und Minus-Bilder für den Klappmechanismus nicht mehr verfügbar, deshalb habe ich u.a. auch nochmal das Skript mit verfügbaren Bildern an diesen Beitrag hier angehängt.
Solltest du die Plus-/Minus-Symbole beibehalten, aber standardmäßig den Inhalt ausgeblendet haben wollen, musst du im Bild vor dem Container eben noch als Standard von Minus- auf Plus-Zeichen umstellen.
Und den Container selbst dann noch mit display:none; auszublenden nicht vergessen...
Es könnte dann noch sein, dass du beim Lesen des Cookies das Verhalten etwas abändern musst, damit sozusagen nicht nach einem zu schließenden sondern einem zu öffnenden Container gesucht wird, dann benötigst du evtl. den auskommentierten Teil in der Funktion readKlappCookie().
Dieser war wohl im Endeffekt soweit überflüssig, aber aus diesem Grund noch auskommentiert beibehalten.
Viel Glück, dass du das so in etwa umsetzen kannst!

Hallo Florian,
danke für Deine schnelle Antwort,
Das Script läuft soweit recht gut.
Ich melde mich, wenn ich alles umgesetzt habe.
Wolfgang

Hallo Florian,
ich habe etwas ausprobiert!
Wird der Text zugeklappt, und die Seite neu aufgebaut (F5), wird der verdeckte Text für ca. 0,5 Sekunden angezeigt.
Aber nur im IE9.
• Ich habe soweit alle möglichen "var-Elemente" an Ihren zugewiesenen Platz geschrieben.
Beim Neuaufbau der Seite (F5), blitzt der verdeckte Text jetzt nur noch kurz auf. Sehr zufriedenstellend.
• Leider funktioniert die Speicherung nicht im Google-Chrome (Auch nicht mit dem Original-Script)
• Wenn das Script so komlett ausgeschrieben ist, sieht es so aus, als wenn einge Elemente zu viel sind. Ist das so?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Klapp-Container</title>
<script language="JavaScript" type="text/javascript">
function readKlappCookie() {
if (document.cookie) {
for (var i=0;i < document.cookie.split(';').length;i++) {
while (document.cookie.split(';')[i].charAt(0)=='')
document.cookie.split(';')[i] = document.cookie.split(';')[i].substring(1,document.cookie.split(';')[i].length);
if (document.cookie.split(';')[i].split('=')[1]=='zu') {
document.getElementById(document.cookie.split(';')[i].split('=')[0]).style.display = 'none';
document.getElementById('pic'+ document.cookie.split(';')[i].split('=')[0]).src = 'http://files.homepagemodules.de/b2001010/a_489.gif';
}
}
}
}
function klapp(elementID) {
if (document.getElementById(elementID).style.display != 'none') {
document.getElementById(elementID).style.display = 'none';
document.getElementById('pic' + elementID).src = 'http://files.homepagemodules.de/b2001010/a_489.gif';
document.cookie = elementID + '=zu';
}
else if (document.getElementById(elementID).style.display == 'none') {
document.getElementById(elementID).style.display = 'block';
document.getElementById('pic' + elementID).src = 'http://files.homepagemodules.de/b2001010/a_488.gif';
document.cookie = elementID + '=auf';
}
}
</script>
</head>
<body onLoad="readKlappCookie();">
<a href="javascript:klapp('container1')"><img src="http://files.homepagemodules.de/b2001010/a_488.gif" border="0" width="20" height="16" id="piccontainer1" alt="klapp"></a>
<div id="container1">
Hier folgt der Inhalt der aus- und eingeblendet werden soll<br>container1
</div>
</body>
</html>
Bis dann und nochmals Danke für Deine Hilfe
Wolfgang

Hallo Wolfgang,
hast du das Skript auch mal genau so ausprobiert, wie ich es zuletzt in diesem Thread gepostet habe.
Das müsste nämlich genau so funktionieren.
Was du mit zu vielen Elementen genau meinst, kann ich jetzt nicht ganz genau nachvollziehen, aber normalerweise sollte alles ebenso wie vorher mit Variablen funktionieren.
Ausnahmen nur, falls sich der Variableninhalt ändert und sie erneut verwendet wird.
Probleme könnten auch dadurch auftreten, dass in deiner Version in das Ergebnis der Split-Methode etwas gespeichert werden soll.
Könnte sein, dass der Inhalt verloren geht, da er ja keiner Variablen zugewiesen wird.
Versuche es also nochmal genau so, wie ich weiter oben gepostet habe.
Das Problem mit Chrome könnte sein, dass es eigentlich gar keines in dem Sinne ist.
Sofern andere Browser damit klar kommen, liegt es höchstwahrscheinlich an den Sicherheitseinstellungen von Chrome.
Bei Chrome dürfen Addons nicht einmal auf die Default-Seiten von Chrome zugreifen.
Ziemlich ärgerlich, wenn z.B. Mausgesten auf der "Neuer Tab"-Seite nicht funktionieren und umständlich geklickt werden muss.
Ich schätze einfach, dass Chrome keine Cookies von lokal gespeicherten Webseiten zulässt.
Bei Firefox funktioniert es zwar, aber Firebug hat z.B. auch Probleme, die lokalen Cookies zur angezeigten Seite aufzulisten.
Entweder sehe ich gar keine Cookies oder alle von lokal getesteten Seiten.
Macht ja auch Sinn, da in diesem Fall mein Computer die aufgerufene Domain ist, welche eben alle lokal getesteten Seiten beherbergt und damit auch deren Cookies.
Teste das fertige Skript also, falls noch nicht geschehen, nochmals auf einem Testserver wie XAMPP oder auf deinem Online-Webspace.
Womöglich lässt Chrome dann die Speicherung von Cookies zu.
Die Überprüfung in Chrome ist allerdings schwerer als in Firefox, die WebDeveloper-Toolbar zeigt mir keine Cookies an.
Man kann höchstens in den Optionen in die Liste aller Cookies reinschauen.
Viel Glück!

Hallo Florian,
läst sich das Script dahin erweitern oder ändern, dass ein Spoiler geöffnet und einer geschlossen ist?
Ich wollte hierüber eine große und kleine Iconbar umschalten.
So wie hier, aber es funktioniert nicht:
<img src="http://png-1.findicons.com/files//icons/...ue/16/minus.png" border="0" width="20" height="16" id="piccontainer1" alt="klapp" />
</a>
<div id="container1" style="display:none">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />Iconbar 1</p>
</div>
<div id="container1" style="display:block">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />Iconbar 2</p>
</div>
Gruß

Wolfgang

Hallo Wolfgang,
das klappt wahrscheinlich nicht, weil beide Container die gleiche ID besitzen.
Versuche evtl. mal, die Klappfunktion für beide Container gleichzeitig aufzurufen.
Ich habe die Aufrufe jetzt einfach mal in ein onclick-Attribut geschoben, aber wichtig wäre meiner Meinung nach nur der gleichzeitige Aufruf.
Du müsstest eben noch im HTML-Quellcode / CSS-Eigenschaften einen Container auf display:none; und einen auf block schalten.
Bei Klick auf den Link werden dann beide Container eben "in die andere Richtung" geklappt.
2
3
4
5
6
7
8
9
10
11
<a href="javascript:void(0);" onclick="klapp('container1');klapp('container2');">
<img src="http://png-1.findicons.com/files//icons/1156/fugue/16/minus.png" border="0" width="20" height="16" id="piccontainer1" alt="klapp" />
</a>
<div id="container1">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />container1</p>
</div>
<div id="container2">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />container2</p>
</div>
Könnte sein, dass du dann den Kommentar aus der Skript-Fuktion readKlappCookie() noch wieder mit reinnehmen müsstest.
2
3
4
5
6
if (c[1]=='auf') {
...
}
else if (c[1]=='zu') {
...
}
Zumindest falls Fehler auftreten, weil ein Container standardmäßig auf block und einer auf none steht.

Hallo Florian,
es funktioniert fast.
Wenn man die Container wie unten anordnet, funktioniert das Auf- und Zuklappen (ein Container offen, einer geschlossen), nur das Speicher geht nicht!
<img src="http://png-1.findicons.com/files//icons/...ue/16/minus.png" border="0" width="20" height="16" id="piccontainer1" alt="klapp" />
</a>
<div id="container2" style="display:none">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />Iconbar 1</p>
</div>
<div id="container1" style="display:block">
<p>Hier folgt der Inhalt der aus- und eingeblendet werden soll<br />Iconbar 2</p>
</div>


Hallo Wolfgang,
ich habe nun endlich eine Lösung, witzigerweise ist sie sogar eigentlich recht einfach.
Dabei wollte ich schon mit dem Cookiemanager-Skript anfangen zu arbeiten.
Der Hauptgrund war das Bildchen, welches ja zwischen Plus- und Minus-Zeichen wechselt, wenn man die Klapp-Funktion benützt.
Die Benennung ist da immer picCONTAINERNAME, wenn aber container2 mit dem gleichen Link wie der erste geklappt werden soll, kann das Skript kein weiteres Bildchen mit ID piccontainer2 finden.
Diesen gäbe es ja nur, wenn jeder Container ein eigenes Bildchen zum Wechseln hätte.
Lösung 1 wäre also, ein Bildchen für jeden Container anzulegen (mit beliebiger Bild-URL) mit ID picCONTAINERNAME:
<img src="http://png-1.findicons.com/files//icons/1156/fugue/16/minus.png" border="0" width="20" height="16" id="piccontainer2" alt="klapp" />
Dabei muss es auch nicht verlinkt sein, hauptsache das Skript findet ein Bild mit entsprechender ID, könnte man theoretisch auch per display unsichtbar schalten.
Lösung 2 ist es, das Skript von dem auftretenden Fehler zu befreien.
Letztendlich habe ich mich dafür entschieden und folgende IF-Abfragen (jeweils zweimal) ergänzt:
2
3
if (document.getElementById('pic'+c[0]))
... und ...
if (document.getElementById('pic'+elementID))
Existiert nun also ein Bildchen für den Klappmechanismus, kann die Bilddatei ausgewechselt werden, ansonsten wird es "ignoriert" und kein Fehler geworfen.
Es funktioniert nun also, mit einem Bildchen mehrere Container umzuklappen.
Nebenbei gesagt, braucht der Link natürlich nicht unbedingt um das Bild herum liegen.
Theoretisch könntest du bei dieser Version auch nur einen Klapp-Link anlegen, ohne ein einziges Bildchen.
Dann hast du nur optisch keine Anzeige mehr, in welchem Klapp-Zustand sich die Container befinden.
Jedenfalls müssen nicht mehr für alle Container Bilder angelegt werden, falls du doch welche möchtest, gibst du ihnen eine ID nach dem Schema picCONTAINERNAME.
Dann werden die Bilddateien auch wie gewünscht gewechselt.
Hier in der Testdatei habe ich noch das Standard-Bild von Minus auf Plus geändert, da du Container 2 als Standard geöffnet haben möchtest.
Weil man beim Klappen immer das Plus-Zeichen für den zweiten Container zu sehen bekommt.
Es wäre sonst ziemlich verwirrend, ohne gesetztes Cookie ein Minus zu Anfang zu sehen, und nach dem Klappen beim gleichen Container ein Plus-Zeichen.
Alternativ hätte man natürlich auch die Variablen bei klapp_plus und klapp_minus vertauschen können, wollte aber die Logik so beibehalten.
Ich könnte mir auch vorstellen, dass du in deinem Anwendungsfall die beiden Bildchen durch ein spezielles Icon/Logo für den jeweiligen Container ersetzen könntest.
Wie auch immer, sollte wie gesagt nun soweit wieder korrekt funktionieren, viel Spaß damit!

Hallo Florian,
es funktioniert. Danke danke!
Gruß
Wolfgang