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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I let users decide which stylesheet they want, and then store it in a cookie?

Cookies

How do I let users decide which stylesheet they want, and then store it in a cookie?

by  cLFlaVA  Posted    (Edited  )
Somewhat easily. For this, we'll need a web page ([tt]switch-styles.html[/tt]) and two style sheets ([tt]style1.css[/tt], [tt]style2.css[/tt]). I would also suggest storing the javascript in a separate file, but that's another FAQ.

ok, first things first: the style sheets.

style1.css
Code: 
/* default style sheet for style-switcher.html */

body {
	color: blue;
	font-family: monospace;
	font-weight: bold;
}

a:link, a:visited, a:hover, a:active {
	color: blue;
}

style2.css
Code: 
/* alternative style sheet for style-switcher.html */

body {
	color: red;
	font-family: sans-serif;
	font-weight: bolder;
}

a:link, a:visited, a:hover, a:active {
	color: red;
}

next, we'll need javascript. hopefully the commenting i've provided is good enough so you can understand what's going on.

Code: 
<script type="text/javascript"><!--

[gray]// our two style sheet paths[/gray]
var cStyleSheetBlue = "style1.css";
var cStyleSheetRed = "style2.css";

[gray]// this function changes the style sheet when the user clicks on a link
// and then calls the storing function[/gray]
function changeStyleSheet ( strLinkId, strStyleSheetLocation ) {
    [gray]// switch the stylesheet location[/gray]
    document.getElementById( strLinkId ).href = strStyleSheetLocation;
    [gray]// call the storing function[/gray]
    storeStyleSheetInCookie( strLinkId, strStyleSheetLocation );
}

[gray]// this function stores the style sheet preference in a cookie on the user's machine
// the cookie expires one year from the time it is stored
// and can be read from any page on your website[/gray]
function storeStyleSheetInCookie ( strCookieName, strStyleSheetLocation ) {
    [gray]// get today's date[/gray]
    var dtExpire = new Date();
    [gray]// add a year to the date[/gray]
    dtExpire.setYear( dtExpire.getFullYear() + 1 );
    [gray]// store the cookie[/gray]
    document.cookie = escape( strCookieName ) + "=" + escape( strStyleSheetLocation ) + "; expires=" + dtExpire.toGMTString() + "; path=/;";
}

[gray]// this function will attempt to retrieve the preffered stylesheet url from 
// a cookie on the user's machine[/gray]
function getStyleSheetFromCookie ( strLinkId ) {
    [gray]// the name of the cookie we are trying to find[/gray]
    strLinkId = escape( strLinkId );
    [gray]// if there are no cookies, leave the function[/gray]
    if ( document.cookie == "" ) {
        return false;
    } else {
        [gray]// store the raw cookie data in a string[/gray]
        var strCookie = document.cookie;
        [gray]// look for the cookie's name[/gray]
        var intFirstChar = strCookie.indexOf( strLinkId );
        [gray]// if the cookie we want does not exist, leave the function[/gray]
        if ( intFirstChar < 0 ) return false;
        [gray]// look for the end of the cookie value[/gray]
        var intLastChar = strCookie.indexOf( ";" );
        [gray]// if there is no separator, we'll just take the whole thing[/gray]
        if ( intLastChar < 0 ) intLastChar = strCookie.length;
        [gray]// skip the name= part of the cookie (so we only get the data we want)[/gray]
        intFirstChar = strLinkId.length + 1;
        [gray]// return the style sheet's url[/gray]
        return unescape( strCookie.substring( intFirstChar, intLastChar ) );
    }
}

[gray]// this function will set the preferred style sheet (if one exists) when the
// page initially loads[/gray]
function preloadStyleSheet ( strLinkId ) {
    var strPreferredStyleSheet = getStyleSheetFromCookie( strLinkId );
    if ( strPreferredStyleSheet != false )
        changeStyleSheet( strLinkId, strPreferredStyleSheet );
}

[gray]// attach the preload function to the onload event[/gray]
onload = function() { preloadStyleSheet("ss") };

//--></script>

and last, but of course not least, we'll need the html.

switch-styles.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<link id="ss" rel="stylesheet" href="style1.css" />
</head>

<body>

<h1>JavaScript Stylesheet Switcher</h1>

<ol>
    <li><a href="#" onclick="changeStyleSheet( 'ss', cStyleSheetRed ); return false;">Red Style</a></li>
    <li><a href="#" onclick="changeStyleSheet( 'ss', cStyleSheetBlue ); return false;">Blue Style</a></li>
</ol>

</body>
</html>

And that's it!
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top