• User Newbie

    [JS] Ricordare l'impostazione CSS tramite cookie

    Ciao a tutti,
    avrei bisogno che i miei utenti scelgano il loro stile preferito per il mio sito e di mantenerlo fino a quando non decidano di cambiarlo.
    Per fare questo dovrei utilizzare questo script in tutte le pagina del mio sito:
    [html]<script type="text/javascript">
    function cambiaCSS(file_scelto) {
    var elenco = document.getElementsByTagName("link");
    var tagstile;
    for (n=0;n<elenco.length;n++) if(elenco.media=="screen") tagstile = elenco;
    tagstile.href = file_scelto;
    }
    </script>[/html]
    [html]<a href="javascript:cambiaCSS('foglio1.css')"> Foglio 1 </a>
    <a href="javascript:cambiaCSS('foglio2.css')"> Foglio 2 </a>[/html]
    Però ora avrei bisogno di impostare i cookie perchè ricordassero la decisone presa dall'utente, e possibilmente dovrebbero rimanere nel pc dell'utente anche se questo spegne il computer o chiude internet...in poche parole dovrebbero durare finchè non vengono azzerati. So che quello che devo modificare è sicuramente il primo script quello che dovrò inserire in tutte le pagine ma non so come modificarlo, ho provato a cercare in rete come "giocare" con i cookie attraverso javascript ma non ho capito niente.
    Qualcuno di voi più esperto di me saprebbe aiutarmi?


  • Super User

    Ciao 🙂

    Benvenuto nel forum.

    Prova a leggere questa semplice guida, tu però anziché memorizzare il nome dell'utente andrai a memorizzare il tipo di css.

    http://www.apogeonline.com/webzine/2002/11/28/14/200211281401

    :ciauz:


  • User Newbie

    Grazie per il benvenuto, qui siete tutti molto gentili, ti ringrazio anche per la guida che mi hai postato ma ne ho lette di tutti i tipi...il fatto e che con i javascript non ho proprio compatibilità...sapresti aiutarmi nel mio scopo?


  • Super User

    Ciao 🙂

    Allora prova ad utilizzare questo script
    http://javascript.internet.com/css/change-style.html

    <script type="text/javascript" language="javascript">
    <!--
    // These are the variables; you can change these if you want
    var expDays = 9999;  // How many days to remember the setting
    var standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.
    var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.
    var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site.  For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/
    
    // These are the names of your different .css files; use the name exactly as on your Web site
    var ScreenCSS_1 = 'screen_1.css';
    var ScreenCSS_2 = 'screen_2.css';
    var ScreenCSS_3 = 'screen_3.css';
    var ScreenCSS_4 = 'screen_4.css';
    var ScreenCSS_5 = 'screen_5.css';
    
    // If you use different .css files for printing a document, you can set these.  If you don't even know what this is, name then everything exactly the same as above.
    // So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".
    var PrintCSS_1 = 'print_1.css';
    var PrintCSS_2 = 'print_2.css';
    var PrintCSS_3 = 'print_3.css';
    var PrintCSS_4 = 'print_4.css';
    var PrintCSS_5 = 'print_5.css';
    
    /***********************************************************************************************
    
        DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING
    
    ***********************************************************************************************/
    
    // This is the main function that does all the work
    function switchStyleOfUser(){
        var fontSize = GetCookie(nameOfCookie);
        if (fontSize == null) {
            fontSize = standardStyle;
        }
    
        if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }
        if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }
        if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }
        if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }
        if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }
    
        if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }
        if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }
        if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }
        if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }
        if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }
    
        var fontSize = "";
        return fontSize;
    }
    
    var exp = new Date();
    exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
    
    // Function to get the settings of the user
    function getCookieVal (offset) {
        var endstr = document.cookie.indexOf (";", offset);
        if (endstr == -1)
        endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
    }
    
    // Function to get the settings of the user
    function GetCookie (name) {
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen) {
            var j = i + alen;
            if (document.cookie.substring(i, j) == arg)
            return getCookieVal (j);
            i = document.cookie.indexOf(" ", i) + 1;
            if (i == 0) break;
        }
        return null;
    }
    
    // Function to remember the settings
    function SetCookie (name, value) {
        var argv = SetCookie.arguments;
        var argc = SetCookie.arguments.length;
        var expires = (argc > 2) ? argv[2] : null;
        var path = (argc > 3) ? argv[3] : null;
        var domain = (argc > 4) ? argv[4] : null;
        var secure = (argc > 5) ? argv[5] : false;
        document.cookie = name + "=" + escape (value) +
        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
        ((path == null) ? "" : ("; path=" + path)) +
        ((domain == null) ? "" : ("; domain=" + domain)) +
        ((secure == true) ? "; secure" : "");
    }
    
    // Function to remove the settings
    function DeleteCookie (name) {
        var exp = new Date();
        exp.setTime (exp.getTime() - 1);
        var cval = GetCookie (name);
        document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }
    
    // This function is used when the user gives his selection
    function doRefresh(){
        location.reload();
    }
    
    // This will call the main function.  Do not remove this, because otherwise this script will do nothing...
    document.write(switchStyleOfUser());
    
    -->
    </script>
    

    Devi personalizzare i nomi degli stili che vuoi usare.
    Nel punto dove vuoi richiamare il cambio di stile devi impostare l'evento onclick così:

    onclick="SetCookie(nameOfCookie, NumeroCss, exp); doRefresh();">
    

    :ciauz: