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 cookies.js:
alla fine prima della chiusura del tag body ho messo questo:
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...!!
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...!!