skin diversi con jquery e cookie

  • Creatore Discussione Creatore Discussione sifting
  • Data di inizio Data di inizio

sifting

Nuovo Utente
4 Dic 2013
3
0
0
Salve a tutto il forum!! Mi scuso con l'amministratore se metterò abbastanza codice ma non saprei sennò come farlo vedere...
Avrei un piccolo progetto in mente da usare su un mio minisito privato che sto facendo ( non ancora in rete ). Premetto che purtroppo conosco solo HTML e CSS...
In pratica vorrei far si che si possa scegliere lo "skin" del sito ovvero cambiare le icone e sfondo di 3 o 4 pagine e che il computer ricordi il css scelto tramite cookies. Ho trovato in internet la soluzione tramite plugin jquery che farebbe proprio al caso mio tranne un piccolo particolare che spiegherò alla fine.
http://www.gleenk.com/cookie-e-jquery-cambiamo-foglio-stile/#

In pratica nella pagina index.html richiamo la libreria e i file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
<script type="text/javascript" src="js/cambiocss/scripts.js"></script>
<script type="text/javascript" src="js/cambiocss/cookie.js"></script>

Codice di scripts.js:

Codice:
function swapcss() {
  $("#nav li a").click(function() { 
    $("link").attr("href",$(this).attr('rel'));
    $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
    return false;
  });
  }

codice cookies.js:

Codice:
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};


alla fine prima della chiusura del tag body ho messo questo:

Codice:
<script type="text/javascript">

if($.cookie("css")) {
  $("link").attr("href",$.cookie("css"));
}
$(document).ready(function(){
  swapcss();
  });
</script>

E sempre nel body un menù:

<div id="changestyle">
<ul id="nav">
<li><a href="#" rel="style/stile1.css">STILE1</a></li>
<li><a href="#" rel="style/stile2.css">STILE2</a></li>
</ul>

Ora funziona tutto alla grande ma mi cambia solo il css di questa pagina. Come potrei fare per far si di mettere il menù ul, li... in una pagina chiamata setting.html e che mi cambiasse il css della pagina index.html e magari delle altre due?

Grazie mille...!!
 
ciao io opterei per una soluzione implementando linguaggio lato server:
PHP:
<a href='<?php echo $_SERVER['PHP_SELF']?link_prova=1'>link prova</a> // rimando il click sulla stessa pagina richiamando la var link_prova

if(isset($_GET['link_prova')){

setcookie('nuovo_css.css', ”, time() – 3600); /** questo cookie vale per un'ora

}

//se il cookie esiste allora mi preleva il css tramite cookie

$var=$_COOKIE['nuovo_css.css'];//prelevo cookie

if(isset($var)){
?>
 <link href="<?php echo $var;?>" rel="stylesheet" type="text/css">
<?php

}else{
/**prelevo il css normale
}

p.s. il codice l'ho fatto di fretta però insomma basta visualizzare l'esistenza del cookie e inserire la clausula if/else;
 
Ultima modifica:

Discussioni simili