skin a seconda della risoluzione

[Lady Blackice]

Salve a tutti!
Sono nuova e mi scuso se scuso se questo argomento era già presente su altri topic, ma non sono riuscita a trovarlo.
Dunque, sto realizzando il mio sito con i CSS e, utilizzando il posizionamento assoluto, ho dovuto per forza realizzare due fogli di stile diversi, uno per 800x600 e l'altro 1024 x768.
Avendo nelle stessa cartella i due fogli: classic.css e classic1024.css, vorrei utilizzare uno javascript che riconosca la risoluzione dell'utente e, solo se è 1024x768, vada a modificare l'url del foglio di stile aggiungendo '1024' alla fine...
Il problema è che non so come fare...
Qualcuno potrebbe darmi una mano?
Grazie in anticipo!!! :bubu:

[oronze]

<script>
if (screen.innerWidth==768){
//codice che carica il css classic1024.css
}
else{
//codice che carica il css classic.css
}
</script>

[Lady Blackice]

Ops... credo di non essermi spiegata...
l'if è ok, è la parte che non hai scritto quella che non so fare!
Il file classic è già precaricato nella pagina html, mentre il javascript deve cambiarlo solo se la risoluzione è 1024x768, aggiungendo '1024 alla fine del nome...
La parte del codice che non so fare è questa qui, cioè cosa scrivo per andare a cambiare il nome?

[Xinod]

document.write('<link rel="styleSheet" type="text/css" href="classic1024.css" />');

occhio al percorso
ciao

[Lady Blackice]

Ciao Xinod! Grazie per la risposta...
devo dire che ora il javascrpt funziona, però devo fare ancora delle modifiche...
dunque, poichè classic non è l'unico stile che uso (cioè ho diverse skin disponibili per il sito, che cambio tramite un altro javascript, non posso andare direttamente a scrivere

document.write('<link rel="styleSheet" type="text/css" href="classic1024.css" />');
perchè non conosco quale css è caricato...
Pensavo di usare una variabile in cui copio il nome del css attualmente in uso (ma non so come accedervi, poi aggiungo '1024' al nome, e poi scrivere
document.write('<link rel="styleSheet" type="text/css" href=variabile />');
ma non so e è corretto...
L'altro javascript funziona con un cookie, lo allego qui sotto, così magari la situazione è più chiara...
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = '; expires='+date.toGMTString();
}
else expires = '';
document.cookie = name+'='+value+expires+'; path=/';
}

function readCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function setCSS(nome_file_css) {
createCookie('skinUtente',nome_file_css,365);
location.reload();
}
function setCSShref(nome_file_css) {
var link_ = document.getElementsByTagName("link");
for ($i=0;$i<link_.length;$i++)
if(link_[$i].media=="screen") link_[$i].href="styles/"+nome_file_css+"/"+nome_file_css+".css";
}

nome_file_css = readCookie('skinUtente');
if(nome_file_css) setCSShref(nome_file_css);

Help me please!!:fire:
Grazie a tutti!

[Xinod]

ora è + chiaro,
ti conviene modificare il nome del css richiamato ogni volta piuttosto che memorizzare già il 1024 nel cookie (nel caso l' utente cambi risoluzione, raro ma...)

var risoluzione=(screen.width>=768)?'1024':''

...resto dello script...

cambiando
if(link_[$i].media=="screen") link_[$i].href="styles/"+nome_file_css+"/"+nome_file_css+".css";
in
if(link_[$i].media=="screen") link_[$i].href="styles/"+nome_file_css+"/"+nome_file_css+risoluzione+".css";

chiaramente, se anche il css di default è differenziato in base alla risoluzione prova ad aggiungere dopo var risoluzione...
document.write('<link rel="styleSheet" media="screen" type="text/css" href="classic'+risoluzione+'.css" />');

ciao

[Lady Blackice]

:mavieni: :mavieni: :mavieni: :mavieni: :mavieni: :mavieni: :mavieni:
Non posso crederci, finelmente funziona!
Non so proprio come ringraziarti Xinod!
Ora è perfetto...
Non so come tu abbia fatto dai miei messaggi 'cifrati' a capire quello che avevo in mente, comunque ora il javascript fa esattamente quello che mi aspettavo..,
GRAZIE!!!!!!!!!

[Xinod]

di nulla

[Lady Blackice]

Ciao Xinod! Sono sempre io che rompo...
Ho notato che la parte dello script riguardante la risoluzione non funziona con Opera. Posso fare qualche modifica per farlo funzionare o mi rassegno?
Ciao

[Xinod]

potrebbe mal digerire l' utilizzo del link_[$i].href,
prima di tutto ti consiglierei di non fare riferimento ad un
foglio di stile esterno preesistente, cercando di cambiarne il percorso,
ma di andarlo a "scrivere" direttamente con il document.write

prova, su opera vado ad intuito
(personalmente spero si estingua presto :tongue: )