Adventskalendertürchen geöffnet lassen mit Cookies?

kplasa · 09. Nov. 2014

Adventskalendertürchen geöffnet lassen mit Cookies

Hallo,

ich bin am Programmieren eines Online-Adventskalenders, bei dem jedes Türchen einer div-Box entspricht, und frage mich, welches die einfachste Möglichkeit ist, für den individuellen User am nächsten Tag die bereits von ihm angeklickten Türchen (div-Boxen) am selben PC beim Aufrufen der Website bereits beim Laden automatisch zu öffnen? Meines Erachtens ließe sich das nur über ein Cookie realisieren, welches für jeden einzelnen User auf dessen Festplatte kopiert wird. Die Türen öffnen sich bislang mittels "onlick" und dem Ausführen einer Javascript-Funktion, welche die "visibility" der angeklickten div-Box auf "hidden" setzt.
Meine diesbezüglichen Fragen wären:

a) Wie beschreibe ich das Cookie beim Anklicken jeder einzelnen div-Box mit einem Wert, daß er signalisiert, die div-Box wurde angeklickt?
b) Wie lese ich beim Laden der Website ein solches Cookie am nächsten Tag wieder aus, und zwar so, daß die an den Vortagen angeklickten div-Boxen per Javascript automatisch auf "visibility" = "hidden" gesetzt werden?

Ich habe mal etwas ausprobiert und den Code hier eingefügt, weil er so nicht zu funktionieren scheint. Wenn ich auf die erste Box mit der Zahl "8" (also 8. Dezember) klicke, dann soll zusätzlich zum Setzen der div-Box auf "hidden" auch der Wert "8"

an ein Cookie übergeben werden. Beim nächsten Aufrufen der Website soll das Cookie ausgelesen

und alle Boxen von 1 bis n (also vom 1. bis n. Dezember) auf "hidden" gesetzt werden. Irgendetwas muß an dem Code aber falsch sein, weil beim nächsten Aufrufen alle Boxen wieder zu sehen sind. Mein Browser erlaubt alle Cookies. Vielleicht hat jemand von Euch ja ein paar Tips?

#### Ich habe den Fehler erkannt: Die Cookie-Funktion funktioniert nicht, wenn ich das Offline-Dokument im Browser aufrufe. Nachdem ich die Website online gestellt habe, waren nach Anklicken des 8. Türchens beim nächsten Start der Website auf demselben PC die ersten acht Türchen automatisch geöffnet. ####

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link href="css/main.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
	
	function check_cookie(){
		if (document.cookie=='8'){
			document.getElementById('r003_c004_01').style.visibility='hidden';
			document.getElementById('r004_c003_02').style.visibility='hidden';
			document.getElementById('r004_c005_03').style.visibility='hidden';
			document.getElementById('r004_c001_04').style.visibility='hidden';
			document.getElementById('r003_c006_05').style.visibility='hidden';
			document.getElementById('r003_c002_06').style.visibility='hidden';
			document.getElementById('r002_c005_07').style.visibility='hidden';
			document.getElementById('r001_c001_08').style.visibility='hidden';
		};
	};

	function tuerchenoeffnen(box_id,wert){
		document.cookie=wert;
		document.getElementById(box_id).style.visibility='hidden';
	};
</script>

</head>

<body>

<div class="main_container">
	<div id="holidays_001">
		<div class="left_001" id="r001_c001_08" onclick="tuerchenoeffnen('r001_c001_08',8)"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_002" id="r001_c002_23"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_003" id="r001_c003_16"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_004" id="r001_c004_11"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_005" id="r001_c005_21"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_006" id="r001_c006_09"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
   	 	<div class="clear_float"></div>
    
    	<div class="left_001" id="r002_c001_20"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_002" id="r002_c002_12"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_003" id="r002_c003_22"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_004" id="r002_c004_14"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_005" id="r002_c005_07"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_006" id="r002_c006_19"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="clear_float"></div>
    
    	<div class="left_001" id="r003_c001_13"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_002" id="r003_c002_06"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_003" id="r003_c003_17"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_004" id="r003_c004_01"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_005" id="r003_c005_18"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_006" id="r003_c006_05"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="clear_float"></div>
    
    
    	<div class="left_001" id="r004_c001_04"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_002" id="r004_c002_10"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_003" id="r004_c003_02"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_004" id="r004_c004_24"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_005" id="r004_c005_03"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_006" id="r004_c006_15"><img src="http://forum.jswelt.de/images/halftone-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="clear_float"></div>
    </div>
    
    <br /><br />
    
    <div id="holidays_002">
    	<div class="left_001" id="r001_c001_25"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_002" id="r001_c002_26"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_003" id="r001_c003_27"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_004" id="r001_c004_28"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_005" id="r001_c005_31"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="left_006" id="r001_c006_01"><img src="http://forum.jswelt.de/images/blue-background.jpg" width="100%" height="auto" alt="kästchenbild" /></div>
    	<div class="clear_float"></div>
    </div>

</div>

<script type="text/javascript">

check_cookie();

</script>

</body>
</html>

dbarthel · 09. Nov. 2014

AW: Adventskalendertürchen geöffnet lassen mit Cookies

#### Ich habe den Fehler erkannt: Die Cookie-Funktion funktioniert nicht, wenn ich das Offline-Dokument im Browser aufrufe. Nachdem ich die Website online gestellt habe, waren nach Anklicken des 8. Türchens beim nächsten Start der Website auf

das Problem hatte ich auch mal, kommt aber auf den Browser an.
Im Firefox sollte das setzen der Cookies auch offline funktionieren, in Chrome hingegen nur online.

rico2009 · 09. Nov. 2014

AW: Adventskalendertürchen geöffnet lassen mit Cookies

dbarthel schrieb:
Im Firefox sollte das setzen der Cookies auch offline funktionieren, in Chrome hingegen nur online.

Aha, gut zu wissen. Mal wieder was, was jeder Browserhersteller anders macht.

CT24 · 14. Nov. 2014

Dann würde ich localStorage empfehlen. Funktioniert in beiden Browsern Problemlos - HTML5 Web Storage

Adventskalendertürchen geöffnet lassen mit Cookies?

kplasa

New member

dbarthel

Lounge-Member

rico2009

Guest

CT24

New member