Cookies and CSS

JavaScript
1

I have a webpage where the user can change stylesheet from a dropdown menu. Here it is:

<script type=“text/JavaScript”>
function switch_style(choice) {
document.getElementById(“css”).href=“css” + choice + “.css”;
}
</script>

&lt;select onchange="switch_style(this.value)"&gt;
	&lt;option value="4"&gt;Default&lt;/option&gt;
	&lt;option value="1"&gt;Alternativ 1&lt;/option&gt;
	&lt;option value="2"&gt;Alternativ 2&lt;/option&gt;
	&lt;option value="3"&gt;Alternativ 3&lt;/option&gt;
		&lt;/select&gt;

Of course I want to save user choices with a cookie, but how do I do that? I have figured out how to save form content in a cookie, men a stylesheet? I have read some tutorials on the net, but they’re all pretty complicated and I am a newbie. Somebody who can enlighten me?

2

Think about it logically …

You know how to switch a stylesheet

You know how to set a cookie

You know how to read a cookie

… therefore, on page load you read the cookie and, if set, apply the stylesheet defined in the cookie otherwise apply the default stylesheet. :slight_smile:

3

Yeah, but I can do it for a form, not a stylesheet. It’s like: what the **** I am supposed to write? I guess I am not that clever… :frowning:

Yes, I know how to set a cookie. It’s simple. I guess I have a problem with the reading of the cookie. I dont know how to formulate the solution.

4

I presume you have functions to set and read cookies? Thus …

setCookie (‘stylesheet’, 1, 60 * 60 * 24 * 365); //Sets cookie with a value of 1 valid for 1 year

var style = getCookie(‘stylesheet’); //Gets cookie value
document.getElementById(“css”).href=“css” + style + “.css”;

5

Thank you very much for taking time. I want something like this:

<html>
<head>
<link href=“css.css” rel=“stylesheet” id=“css” type=“text/css” />
<link href=“css1.css” rel=“alternate stylesheet” id=“css1” type=“text/css” />
<link href=“css2.css” rel=“alternate stylesheet” id=“css2” type=“text/css” />
<link href=“css3.css” rel=“alternate stylesheet” id=“css3” type=“text/css” />
<link href=“css4.css” rel=“alternate stylesheet” id=“css4” type=“text/css” />

<script type=“text/javascript”>
function getCookie(stylesheet)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(stylesheet + “=”);
if (c_start!=-1)
{
c_start=c_start + stylesheet.length+1;
c_end=document.cookie.indexOf(“;”,c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return “”;
}

function setCookie(stylesheet,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=stylesheet+ “=” +escape(value)+
((expiredays==null) ? “” : “;expires=”+exdate.toGMTString());
}

function change_css()
{
var style = getCookie(stylesheet); //Gets cookie value
document.getElementById(“css”).href=“css” + style + “.css”;
}
</script>
</head>

<body>

&lt;select onchange="change_css(this.value)"&gt;
	&lt;option value="4"&gt;Default&lt;/option&gt;
	&lt;option value="1"&gt;Alternativ 1&lt;/option&gt;
	&lt;option value="2"&gt;Alternativ 2&lt;/option&gt;
	&lt;option value="3"&gt;Alternativ 3&lt;/option&gt;
		&lt;/select&gt;

</body>
</html>

Of course itb does not work.