Problem bei Styleswitcher Cookies auslesen

Ich betreibe für mich privat eine Musikstreamingwebsite. Auf der Website habe ich ein Menü eingebunden, mit dem ich das Design an meine Wünsche anpassen kann. Auf der Website möchte ich den Fortschrittsbalken, die Player-Steuerung, das Seitendesign und das Menüdesign anpassen können. Bei der Player-Steuerung und bei dem Fortschrittsbalken funktionier das schon. Es funktionier aber nur, weil ich zwei völlig verschiedene Styleswitcher benutze. Vor einigen Tagen habe ich dann auch einen weiteren Styleswitcher hinzugefügt, der das Menüdesign regeln soll, auch dieser Switcher ist anders als die ersten zwei Switcher. Es funktionier auch alles ganz gut, ich habe aber das Problem, das, wenn ich das Menü ändere, die Player-Steuerung zurückgesetzt wird, oder umgekehrt.

Ich habe schon oft versucht, einen einzigen Switcher zu duplizieren und so anzupassen, das zwei Cookies speichert werden, was ich nicht geschafft habe. Ich habe jetzt einen Switcher, der mit nur wenig Codes daherkommt und gut funktioniert. Ich habe den Code zweimal im Java Skript stehen und habe in einigen Bereichen andere Bezeichnungen vergeben, damit sie sich unterscheiden, damit zwei Cookies gespeichert werden. Ich habe es auch geschafft, dass sich bei der Benutzung das erste Design nicht durch die Benutzung des zweiten Designs zurücksetzt. Ich kann also alles kombinieren, so wie ich das möchte.

Wenn ich die Website neu lade, ist es so, dass nur eine Einstellung durch die Cookies wiederhergestellt werden kann. Die Cookies werden korrekt unter zwei verschiedenen Namen mit den richtigen Wert gespeichert, das Problem wird also das Auslesen der Cookies sein, leider habe ich auch nach sehr vielen ausprobieren nicht schaffen können, das beide Cookies so geladen werden, das beide ausgewählte Designs wieder angezeigt werden. Ich habe auch festgestellt, dass immer das zuletzt im Skript stehende Cookie geladen wird, dabei ist es egal, ob beide in einem Skript oder in getrennten Skripts geladen werden.

Ich habe das alles dann auf einer kleinen Test-Website getestet, um auszuschließen, das andere Java Skripts da noch einen Einfluss haben. Auch auf der Test-Website besteht dasselbe Problem.

Ich hoffe wirklich sehr, dass mir hier jemand weiterhelfen kann. Ich habe mir echt viel Mühe gegeben, das Problem selbst zu lösen.

Hier mal die Codes.
Bei meinem Test geht es darum, Hintergrundfarbe und Schriftfarbe zu kombinieren.

Das Auswahlmenü

<nav id="nav3"><ul id="navigation"><li class="feld_01"><a>Schrift</a>  
			<ul class="sub_01"><link id="default_schrift" rel="stylesheet" type="text/css" href="schrift_default.css">  
				<li><a onclick="swapStyleSheetSchrift('../css/s_1.css')">Schrift Rot</a></li>  
				<li><a onclick="swapStyleSheetSchrift('../css/s_2.css')">Schrift Gelb</a></li>  
				<li><a onclick="swapStyleSheetSchrift('../css/s_3.css')">Schrift Blau</a></li>  
				<li><a onclick="swapStyleSheetSchrift('../css/s_4.css')">Schrift Grün</a></li>  
				<li><a onclick="swapStyleSheetSchrift('../css/s_5.css')">Schrift Weiss</a></li>  
			</ul>
</li></ul></nav>

<nav id="nav3"><ul id="navigation"><li class="feld_01"><a>Hintergrund</a>  
			<ul class="sub_01"><link id="default_bg" rel="stylesheet" type="text/css" href="bg_default.css">  
				<li><a onclick="swapStyleSheetBg('../css/h_1.css')">Hintergrund Blau</a></li>  
				<li><a onclick="swapStyleSheetBg('../css/h_2.css')">Hintergrund Rot</a></li>  
				<li><a onclick="swapStyleSheetBg('../css/h_3.css')">Hintergrund Grün</a></li>  
				<li><a onclick="swapStyleSheetBg('../css/h_4.css')">Hintergrund Violett</a></li>  
				<li><a onclick="swapStyleSheetBg('../css/h_5.css')">Hintergrund Schwarz</a></li>  
			</ul>
</li></ul></nav>

Das Java Skript

/* Schrift Switch */

window.onload = function(){
  var schriftstyle = getCookie("schriftstyle");  
  if(schriftstyle)
    document.getElementById('default_schrift').setAttribute('href', schriftstyle);  
}

function swapStyleSheetSchrift(sheet){
  document.getElementById('default_schrift').setAttribute('href', sheet);  
  setCookie("schriftstyle", sheet, 30);  
}

function setCookie(name, value, days)
{
  var d = new Date();
  d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + value + "; expires=" + d.toUTCString() + "; path=/";  
}

function getCookie(name)
{
  var cookies = document.cookie.split(";");  
  for(var i = 0; i < cookies.length; i++)
  {
    var ck = cookies[i].trim().split("=");  
    if(ck[0] == name)
      return ck[1];
  }
  
  return false;
}


/* Hintergrund Switch */

window.onload = function(){
  var bgstyle = getCookie("bgstyle");  
  if(bgstyle)
    document.getElementById('default_bg').setAttribute('href', bgstyle);  
}

function swapStyleSheetBg(sheet){
  document.getElementById('default_bg').setAttribute('href', sheet);  
  setCookie("bgstyle", sheet, 30);  
}

function setCookie(name, value, days)
{
  var d = new Date();
  d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + value + "; expires=" + d.toUTCString() + "; path=/";  
}

function getCookie(name)
{
  var cookies = document.cookie.split(";");  
  for(var i = 0; i < cookies.length; i++)
  {
    var ck = cookies[i].trim().split("=");  
    if(ck[0] == name)
      return ck[1];
  }
  
  return false;
}

Ich würde mich sehr darüber freuen, wenn mir jemand bei der Lösung meins Problems helfen kann.

Gruß Timekiller

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 6443318745

Url: https://administrator.de/contentid/6443318745

Ausgedruckt am: 25.11.2024 um 15:11 Uhr

2 Kommentare

Neuester Kommentar

Wenn ich die Website neu lade, ist es so, dass nur eine Einstellung durch die Cookies wiederhergestellt werden kann

Für mich ist auch klar warum, du lädst im onload Event des Dokumentes immer nur ein einziges Cookie aus und setzt auch immer nur eine Einstellung, des weiteren definierst du das Onload-Event doppelt, das funktioniert so nicht, weil nur das letzte davon am Ende gilt und es das erstere überschreibt.
Also packe das Auslesen und Setzen in ein einziges Onload Event und lösche das andere.

window.onload = function(){
     var schriftstyle = getCookie("schriftstyle");  
     var bgstyle = getCookie("bgstyle");  
     if(schriftstyle){ 
        document.getElementById('default_schrift').setAttribute('href', schriftstyle);  
     }
     if(bgstyle){ 
        document.getElementById('default_bg').setAttribute('href', bgstyle);  
     }
}

Persönlich würde ich das ja stattdessen über Style-Klassen machen statt.

Cheers briggs

Hallo briggs

Danke für deine Hilfe, jetzt funktioniert alles bestens und ich habe dadurch die Möglichkeit, das man sich das Design in vielen Bereichen einfach anpassen kann, ohne gleich ein neues Style zu erstellen. Ich hatte das, was du erklärt hast, sogar selbst so gemacht, aber aus irgendeinem Grund hat es nicht funktioniert, kann sein, dass ich einen Fehler gemacht habe und den nicht erkannt habe.

Gruß Timekiller

gelöst Frage JavaScript

Mehr von Timekiller

Download über SFTP vom Server sehr langsamTimekiller - 15 Kommentare

Heiß diskutiert