×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here
Home > Forums > Programmers > Web Development > Javascript > FAQs

Javascript FAQ

Cookies

How do I let users decide which stylesheet they want, and then store it in a cookie? by cLFlaVA
faq216-6093
Posted: 4 Nov 05

Somewhat easily.  For this, we'll need a web page (switch-styles.html) and two style sheets (style1.css, style2.css).  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"><!--

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

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

// 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
function storeStyleSheetInCookie ( strCookieName, strStyleSheetLocation ) {
    // get today's date
    var dtExpire = new Date();
    // add a year to the date
    dtExpire.setYear( dtExpire.getFullYear() + 1 );
    // store the cookie
    document.cookie = escape( strCookieName ) + "=" + escape( strStyleSheetLocation ) + "; expires=" + dtExpire.toGMTString() + "; path=/;";
}

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

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

// attach the preload function to the onload event
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!

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close