#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    georgia
    Posts
    33
    Rep Power
    14

    Javascript, cookies & CSS


    I am trying to figure out how to do the following:

    I have a site with 3 differnt "skins" or 3 different look and feels, most just color changes. I believe all of it can be accomplished via a style sheet, though there is a flash movie on the home page and I am not sure if I can link to a flash movie inside a style sheet.

    The only other images that need to change are the nav bar files which I control in the CSS and a form button which I think I can call from the CSS as well.

    So a user would come to the site and they would need to randomly get one of 3 possible style sheets (not selected by the user), the user would then need to continue to use that style sheet as they click through the site.

    Once the browser is closed they loose the cookie and if they go to the site again they will get one of the 3 random CSS files.

    Does anyone know how I can do this with Javascript and Cookies?

    It would need some kind of random script to select the style sheet, (maybe it grabs one of the 3 color names like green/blue/yellow) then I can call the style sheet green.css so it) so the cookie would tell each page to use "green".

    Also what if a user enters the site from a sub page? Would each page need to first detect for a cookie, if one was present then they use it, if not then it runs the random thingy and gives it a cookie?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    To pick a random skin at startup, you can use something like the following. It assumes your skins are called skin1.css, skin2.css, and skin3.css...
    PHP Code:
    var skin getCookie('skin')
    if (
    skin == null) {
        
    skin 1+Math.round(Math.random()*(2))
        
    setCookie('skin',skin)
    }
    // change path and filename according to your needs here

    document.write('<link rel="stylesheet" href="skins/skin' skin '.css" type="text/css" />')

    function 
    setCookie(name,value) {
        var 
    expires 0
        
    var path '/'
        
    document.cookie name "=" +escape(value) +
            ( (
    expires) ? ";expires=" expires.toGMTString() : "") +
            ( (
    path) ? ";path=" path "")
    }
    function 
    getCookie(name) {
        var 
    start document.cookie.indexOf(name+"=");
        var 
    len start+name.length+1;
        if ((!
    start) && (name != document.cookie.substring(0,name.length))) return null;
        if (
    start == -1) return null;
        var 
    end document.cookie.indexOf(";",len);
        if (
    end == -1end document.cookie.length;
        return 
    unescape(document.cookie.substring(len,end));

    Hope this helps (again..)
    Jeroen
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    georgia
    Posts
    33
    Rep Power
    14
    how then do the other pages work? If there is a cookie does it detect it first? If skin is null then make a new cookie?

    Thanks so much! Will test this shortly!
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    georgia
    Posts
    33
    Rep Power
    14
    Even better:

    PHP Code:

    function setCookie(name,value) {
        var 
    expires 0
        
    var path '/'
        
    document.cookie name "=" +escape(value) +
            ( (
    expires) ? ";expires=" expires.toGMTString() : "") +
            ( (
    path) ? ";path=" path "")
    }
    function 
    getCookie(name) {
        var 
    start document.cookie.indexOf(name+"=");
        var 
    len start+name.length+1;
           if ((!
    start) && (name != document.cookie.substring(0,name.length)))
            return 
    null;
        if (
    start == -1)
            return 
    null;
        
        var 
    end document.cookie.indexOf(";",len);
        if (
    end == -1end document.cookie.length;
            return 
    unescape(document.cookie.substring(len,end));
    }

    var 
    sheet getCookie('sheet');
    if(
    sheet == null){
        
    // never been here before
        
    var my_array = ["green""blue""brown"];
        var 
    colorNum Math.floorMath.random() * my_array.length);
        var 
    color my_array[colorNum];
        
    setCookie('sheet'color);
        
    document.write('<link rel="stylesheet" href="css/' color '.css" type="text/css" />');
    }else{
        
    // cookie exists, which color
        
    document.write('<link rel="stylesheet" href="css/' sheet '.css" type="text/css" />');

    Thanls so much for the help! Got me started in the perfect direction!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    14
    how then do the other pages work? If there is a cookie does it detect it first?
    The javascript cookie detection code needs to be included into every page, otherwise it won't work.
    So put the code into a javascript source file, and make sure every page calls this source file when loading the page (a one-liner).

    The domain variable of "/" takes care that it works for your entire domain. If you only want it to work for a subsection of the domain, you need to specify that by changing the path variable in the setCookie function.

    If skin is null then make a new cookie?
    Correct.

    Have fun,
    Jeroen

IMN logo majestic logo threadwatch logo seochat tools logo