How to remember the CSS style change

Bravogolf · Apr 30, 2004

Hi all.
I got some help from VonGrunt on changing the stylesheets:

Code:

<html>
<head>
    <link id="external_style" rel="stylesheet" type="text/css">
</head>
<body>
<script language="javascript">
function setStyle( oSel )
{    sCSS = oSel.value;
    if (sCSS!= "")    document.getElementById("external_style").href = sCSS;
}
</script>
<form>
<select name="style" onchange="setStyle(this)">
    <option value="">-- Choose style --</option>
    <option value="red.css">Red</option>
    <option value="green.css">Green</option>
    <option value="blue.css">Blue</option>
</select>
</form>
<hr>
Blah blah blah

</body>
</html>

The above works fine, however, how do you make it remain the same once the css style is selected (for example, if the user refreshed the page, how do you stop the selected style sheet from resetting to the default?).

I assume I would use cookies, but I am not really familiar with it....

Can anyone help?

Supra · Apr 30, 2004

I didn't test this because I'm at work, but it looks good.

Code:

<script language="javascript">
onload = init;

function init() {
    sCSS = location.search;
    css = sCSS.indexOf("css=");
        if (css > 0) {
            css += 4;
            document.getElementById("external_style").href = css;
        }
}

function setStyle(oSel) {
    sCSS = oSel.value;
        if (sCSS!= "") {
            location.search = "css="+sCSS;
        }
}
</script>

<form>
<select name="style" onchange="setStyle(this)">
    <option value="">-- Choose style --</option>
    <option value="red.css">Red</option>
    <option value="green.css">Green</option>
    <option value="blue.css">Blue</option>
</select>

Bravogolf · May 4, 2004

Howdy, I couldnt get that to work at all.
It wouldnt even change to a css style in the first place....any more ideas?

vongrunt · May 4, 2004

OK, try this:

Code:

<html>
<head>
    <link id="external_style" rel="stylesheet" type="text/css">
</head>
<body onload="loadStyle()">
<script language="javascript">
var CSS_COOKIE_VAR = "LastCSS";

function changeStyle( oSel )
{	if (sCSS = oSel.value)
	{	setStyle( sCSS );
		var expires = new Date( 2010, 1, 1 ); // long enough :)
		document.cookie = CSS_COOKIE_VAR + "=" + escape( sCSS ) +"; expires=" + expires.toGMTString() + ";" ;
	}
}

function setStyle( sCSS )
{	document.getElementById("external_style").href = sCSS;
}

function loadStyle()
{	aCookie = document.cookie.split(";"); 
	for (i=0; i< aCookie.length; i++)
	{	aName = aCookie[i].split("=");
		if (aName[0] == CSS_COOKIE_VAR )
		{	setStyle( aName[1] );
			document.getElementById("control").value = aName[1];
		}
	}
}
</script>
<form>
<select id="control" name="style" onchange="changeStyle(this)">
    <option value="">-- Choose style --</option>
    <option value="red.css">Red</option>
    <option value="green.css">Green</option>
    <option value="blue.css">Blue</option>
</select>
</form>
<hr>
Blah blah blah

</body>
</html>

Bravogolf · May 5, 2004

Thank you for your help, that works perfectly. I very much appreciate it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to remember the CSS style change

Bravogolf

Programmer

Supra

Programmer

Bravogolf

Programmer

vongrunt

Programmer

Bravogolf

Programmer

Similar threads

Part and Inventory Search

Sponsor