Results 1 to 5 of 5
  1. #1
    Join Date
    Aug 2002
    Posts
    512

    [JS] Store style into a cookie

    Hello Everyone,

    Iam not really good with javascript and i tried to solve this problem myself but it doesn't really work.

    I have a stylesheet switcher. The visitor kan click on a button to change the sites stylesheet. This works without any problems. But i want the settings to be stored in a cookie as well so that the user doesn't have to click the buttons on every single page.

    This is what my .JS file looks like:



    Code:
    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;
    
         }
    
       }
    
    }
    This is how the HTML files look like:

    Code:
    a href="javascript:setActiveStyleSheet('Minus1')"><img src="kleiner.gif" alt="Kleiner" width="11" height="11" border="0"></a>
    a href="javascript:setActiveStyleSheet('MainCSS')"><img src="default.gif" alt="Origineel" width="11" height="11" border="0"></a>
        <td width="11"><a href="javascript:setActiveStyleSheet('Plus1')"><img src="groter.gif" alt="Groter" width="11" height="11" border="0"></a>
    Does anyone know how to do this?

  2. #2
    Join Date
    Nov 2001
    Location
    Vancouver
    Posts
    2,416
    Save the "title" in a cookie variable STYLE or some such thing. Check for a cookie variable STYLE on page load; if exists, attempt to set using the function you created.

    There's plenty of cookie examples out there on the net. Google "javascript read write cookie" and this is the first:

    http://www.quirksmode.org/js/cookies.html
    “Even those who arrange and design shrubberies are under
    considerable economic stress at this period in history.”

  3. #3
    Join Date
    May 2001
    Location
    Dayton, Ohio
    Posts
    4,962
    All of this has already been done with styleSwitcher.js:
    http://www.alistapart.com/stories/alternate/

    I have used this script several times and it works flawless!
    -Mat Sumpter
    Director, Product Engagement
    Penton Media

  4. #4
    Join Date
    Aug 2002
    Posts
    512
    Thanks for the replies. I tried this and it works with one mayor bug. The first time (when no cookie is set yet) the visitor get's a site without any form of css. Is it possible to always have the default unless the user clicks something else?

    I can't figure out where the error is located

    This is what my script looks like atm, the html part in the startpost has not changed.


    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;

    }

    }

    }

    function getActiveStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
    }
    return null;
    }

    function getPreferredStyleSheet() {
    var i, a;
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
    && a.getAttribute("rel").indexOf("alt") == -1
    && a.getAttribute("title")
    ) return a.getAttribute("title");
    }
    return null;
    }

    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=/";
    }

    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }

    window.onload = function(e) {
    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);
    }

    window.onunload = function(e) {
    var title = getActiveStyleSheet();
    createCookie("style", title, 365);
    }

    var cookie = readCookie("style");
    var title = cookie ? cookie : getPreferredStyleSheet();
    setActiveStyleSheet(title);

  5. #5
    Join Date
    May 2001
    Location
    Dayton, Ohio
    Posts
    4,962
    I have two links to my style sheets that I use the above JavaScript on, they look like this:
    Code:
    <link rel="stylesheet" type="text/css" title="blue" media="screen" href="styles/blue.css" />
    <link rel="alternate stylesheet" type="text/css" title="grey" media="screen" href="styles/grey.css" />
    The default style is blue.css and it shows up by default for me.
    -Mat Sumpter
    Director, Product Engagement
    Penton Media

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •