SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Cookies and CSS

  1. #1
    SitePoint Zealot
    Join Date
    May 2009
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cookies and CSS

    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>


    <select onchange="switch_style(this.value)">
    <option value="4">Default</option>
    <option value="1">Alternativ 1</option>
    <option value="2">Alternativ 2</option>
    <option value="3">Alternativ 3</option>
    </select>


    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. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    SitePoint Zealot
    Join Date
    May 2009
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    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.
    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... :-(

    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. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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";
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    SitePoint Zealot
    Join Date
    May 2009
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    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";
    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>


    <select onchange="change_css(this.value)">
    <option value="4">Default</option>
    <option value="1">Alternativ 1</option>
    <option value="2">Alternativ 2</option>
    <option value="3">Alternativ 3</option>
    </select>


    </body>
    </html>

    ----------------------

    Of course itb does not work.


Bookmarks

Posting Permissions

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