Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

johanness · 26-12-2009, 01:06

Hallo,

ich ich habe einen StyleSwitcher in meine Seite eingebunden, der zwischen drei kleinen CSS-Dateien wechselt, die je nur eine typografische Angabe enthalten. Soweit funktioniert es.

Bei einem Reload der Seite oder einem "weitersurfen" wird das ausgewählte CSS nicht beibehalten. Ich vermute es ist ein Cookie-Problem? Wie checke ich beim Laden der Site, was im Cookie gespeichert ist?

HTML-Code:

<link rel="stylesheet" href="fileadmin/resources/fontsize-medium.css" title="medium" media="all" type="text/css" />
<link rel="alternate stylesheet" href="fileadmin/resources/fontsize-small.css" title="small" type="text/css" />
<link rel="alternate stylesheet" href="fileadmin/resources/fontsize-medium.css" title="medium" type="text/css" />
<link rel="alternate stylesheet" href="fileadmin/resources/fontsize-large.css" title="large" type="text/css" />
<script language="javascript">
	function setActiveStyleSheet(title) {
	  var i, a, main;
	  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
		  a.disabled = true;
		  if(a.getAttribute("title") == title) a.disabled = false;
		}
	  }
	  createCookie("style", title, 365);
	}
		
	function createCookie(name,value,days) {
	  if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	  }
	  else expires = "";
	  document.cookie = name+"="+value+expires+"; path=/; domain="+window.location.host;
	}
</script>

<body>
	<div id="wrapper">
		<p>some content....</p>
	</div>
	<a onclick="setActiveStyleSheet('small');return false;" href='#'>klein</a>
	<a onclick="setActiveStyleSheet('medium');return false;" href='#'>mittel</a>
	<a onclick="setActiveStyleSheet('large');return false;" href='#'>gross</a>
</body>

fontsize-medium.css

HTML-Code:

#wrapper {
	font-size: 1em;
}

fontsize-small.css

HTML-Code:

#wrapper {
	font-size: 0.7em;
}

fontsize-large.css

HTML-Code:

#wrapper {
	font-size: 1.3em;
}

Nightflyer · 26-12-2009, 10:42

Zitat:

Zitat von johanness

Ich vermute es ist ein Cookie-Problem? Wie checke ich beim Laden der Site, was im Cookie gespeichert ist?

alert( document.cookie );

johanness · 26-12-2009, 11:15

Ich verwende jetzt ein erweitertes JS-Skipt und setze den Cookie jetzt auch richtig. Hier die Lösung:

HTML-Code:

<script language="javascript">
	var Stil = "Standard";
	var Keks = "Layout";
	var Tage = 30;
	
	// Style Switcher	
	function switchStyle(s) {	
	  if (!document.getElementsByTagName) return;
	  var el = document.getElementsByTagName("link");
	  for (var i = 0; i < el.length; i++ ) {
		if (el[i].getAttribute("rel").indexOf("style") != -1 && el[i].getAttribute("title")) {
		  el[i].disabled = true;
		  if (el[i].getAttribute("title") == s) el[i].disabled = false;
		}
	  }
	}
	
	function loadStyle() {
	  var c = getStyleCookie();
	  if (c && c != Stil) {
		switchStyle(c);
		Stil = c;
	  }
	}
	
	function setStyle(s) {
	  if (s != Stil) {
		switchStyle(s);
		Stil = s;
	  }
	}
	
	window.onload = loadStyle;
	
	
	// Cookie-Funktionen
	function setCookie(name, value, expdays) {   // gültig expdays Tage
	  var now = new Date();
	  var exp = new Date(now.getTime() + (1000*60*60*24*expdays));
	  document.cookie = name + "=" + escape(value) + ";" +
						"expires=" + exp.toGMTString() + ";" +
						"path=/";
	}
	
	function delCookie(name) {   // expires ist abgelaufen
	  var now = new Date();
	  var exp = new Date(now.getTime() - 1);
	  document.cookie = name + "=;" +
						"expires=" + exp.toGMTString() + ";" + 
						"path=/";
	}
	
	function getCookie(name) {
	  var cname = name + "=";
	  var dc = document.cookie;
	  if (dc.length > 0) {
		var start = dc.indexOf(cname);
		if (start != -1) {
		  start += cname.length;
		  var stop = dc.indexOf(";", start);
		  if (stop == -1) stop = dc.length;
		  return unescape(dc.substring(start,stop));
		}
	  }
	  return null;
	}
	
	function setStyleCookie() {
	  setCookie(Keks, Stil, Tage);
	}
	
	function getStyleCookie() {
	  return getCookie(Keks);
	}
	
	function delStyleCookie() {
	  delCookie(Keks);
	}

</script>

HTML-Code:

<a onclick="setStyle('small');setStyleCookie();return false;" href='#'>klein</a>
<a onclick="setStyle('medium');setStyleCookie();return false;" href='#'>mittel</a>
<a onclick="setStyle('large');setStyleCookie();return false;" href='#'>gross</a>

Hilfe dazu gibt's auch bei Toms Stichpunkte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
styleswitcher killt swfobject	andretti	JavaScript & jQuery	15	07-11-2007 17:03
A List Apart Styleswitcher	fakeX	Alternative Technologien	7	04-05-2007 12:11
cookie-problem	lila_m_kuh	PHP und MySQL	2	21-01-2004 09:41
Cookie-Problem	BuRNHeLL	PHP und MySQL	2	15-12-2003 17:00
Cookie Problem	BadBird	PHP und MySQL	9	07-07-2003 20:24