• User

    Cambiare CSS in base alla risoluzione del monitor

    Ciao a tutti, uso WP 2.6.2.
    Ho una barra laterale alta TOT pixel (con posizione fissa, quindi non scrolla). vorrei fare in modo che se il monitor del visitatore è impostato ad una risoluzione con altezza inferiore a TOT venga caricato un css diverso da quello di default (in tale css poi andrei ad impostare la barra in modo non fisso così da farla scrollare).

    Pensavo con php di individuare l'altezza dello schermo ma faccio molta fatica a trovare uno script che mi aiuti in questo.
    Magari voi... potete aiutarmi.
    Grazie mille.


  • User

    Ho trovato questa possibile soluzione:

    • ho creato 2 file css (style.css, style2.css)
    • ho modificato il file header.php del mio tema in questo modo:

    Dopo la stringa:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    

    Ho aggiunto la seguente stringa:

    <script type="text/javascript">
      if (screen.height < 1024)
      link = document.getElementsByTagName("link")[0];
      link.href = "<?php echo bloginfo('template_url'); ?>/style2.css";
    </script>
    

    In questo modo se il visitatore ha una risoluzione piu bassa di 1024 come altezza, il blog carica il file style2.css e non style.css

    Ci sono altre soluzioni?


  • User Attivo

    Ciao Sark! Non saprei ma mi sembra una soluzione adatta! Funziona?


  • User

    In effetti si, ma mi sa che si accavallano i due css. Il risultato è come lo voglio io, tuttavia se apro il sito su un monitor grande mi compare un errore (il triangolino in basso a sinistra di IE) che mi dice che "link" non è un oggetto. Cosa sbaglio?


  • User

    Vorrei scrivere un codice IF che mi carichi o l'uno o l'altro CSS in base alla altezza dello schermo (al momento invece carico quello di default e se il monitor è piccolo lo sovrascrivo con l'altro css). Potete darmi una dritta?
    Ciao.


  • User Attivo

    Ciao, Non son sicurissima di aver capito bene quale sia il tuo problema, ma mi sembra che quello che vuoi fare sia un IF-ELSE
    [php]
    <script type="text/javascript">
    if (screen.height < 1024)
    {
    link = document.getElementsByTagName("link")[0];
    link.href = "<?php echo bloginfo('template_url'); ?>/style2.css";
    }
    else
    {
    link = document.getElementsByTagName("link")[0];
    link.href = "<?php echo bloginfo('template_url'); ?>/style1.css";
    }
    </script>
    [/php]

    Ovviamente style1 e style2 controlla se si lo messi bene, non vorrei averli invertiti!

    Non son sicura di cosa sia link = document.getElementsByTagName("link")[0]; ma forse potrebbe anche funzionare in quest'altro modo:
    [php]
    <script type="text/javascript">
    if (screen.height < 1024)
    {
    <?php echo "<link rel='stylesheet' href='" . bloginfo('template_url') . "/style2.css' type='text/css' media='screen' />"; ?>

    }
    else
    {
    <?php echo "<link rel='stylesheet' href='" . bloginfo('template_url') . "/style1.css' type='text/css' media='screen' />"; ?>
    }
    </script>
    [/php]


  • User

    Dunque, alla fine ho fatto un po un collage tra il codice che mi hai indicato tu e qualcosa che ho trovato sul web. Attualmente uso:

    
    <script type="text/javascript">
      if (screen.height >= 1024) {
      document.write("<link rel='stylesheet' href='<?php bloginfo('stylesheet_url'); ?>' type='text/css' media='screen' />");
      }
      else {
      document.write("<link rel='stylesheet' href='<?php bloginfo('template_url'); ?>/style-small-screen.css' type='text/css' media='screen' />");
      }
    </script>
    
    

    In pratica controllo se il monitor è maggiore/uguale a 1024 come altezza, se si allora carico il css di default, altrimenti carico quello per monitor piccoli.

    Sembra funzionare bene, non ricevo più errori ed effettivamente il blog carica un css o l'altro in base al tipo di monitor.
    Grazie dell'aiuto, molto gentile.


  • User Attivo

    Ottimo! Sembra perfetto anche a me. In effetti mi sa che il mio codice non avrebbe funzionato, ma almeno il concetto era quello! 😛


  • User

    Salve, rianimo questo thread perchè credo sia ciò che sto cercando di fare con il mio sito.

    Spiego il mio problema:
    Ho un sito orizzontale che a risoluzioni maggiori od uguali a 1280x960 non da nessun problema.

    Il problema si presenta quando le risoluzioni scendono sotto i "N"x960 inquanto quasi 1\4 di sito (inferiore) non viene visualizzato nella schermata.

    Avendo un JS per un effetto di transizione fra i vari DIV che elimina anche la scrollbar dal browser si crea un non piccolo problema di fruizione dei contenuti.

    Ho visto che lo script di cui si parla qui serve per modificare il css in base alla risoluzione dello schermo dell'utente e credo che sia proprio quello che fa al caso mio visto che vorrei creare un secondo css ottimizzato per le risoluzioni inferiori a "N"x960.

    Il problema è che tale script si riferisce ad un problema preciso di un blog WP e anche se all'apparenza semplice io purtroppo non sono in grado di adattarlo alle mie esigenze.

    Mi rivolgo quindi alle vostre competenze e supporto per una "traduzione" di tale JS per il mio sito.

    *Ps: So che questa parte del forum riguarda wordpress, ma credo che il mio problema sia coerente con l'argomento trattato, inoltre pur essendo registrato da un po' di tempo sul ForumGT sono arrivato a questa pagina tramite una ricerca sull'argomento tramite Google, e se il "capo" ha detto che è qui che giace la risposta al mio problema, spero i mod accettino ugualmente il mio post in sezione, o al limite mi spostino in una sezione più consona, ma cortesemente, supportatemi *:)

    Grazie.


  • Moderatore

    Ciao Gnaz2104,
    non sono espertissimo di JS ma quel codice mi sembra generico e non ad esclusivo utilizzo su blog WordPress.

    Hai provato ad utilizzarlo sul tuo sito? Ovviamente devi sostituire <?php bloginfo('stylesheet_url'); ?> e <?php bloginfo('template_url'); ?>/style-small-screen.css con gli url dei tuoi fogli di stile. 🙂


  • User

    Ciao Giapox, grazie per l'intervento.

    Come dicevo prima non ne capisco molto di JS, quindi credendo che il codice dovesse venir adattato ad un sito "normale" non ho provato ad implementarlo.

    Domani provo e ti farò sapere grazie.


  • ModSenior

    Una soluzione più pulita sarebbe quella di usare la proprietà media query, in pratica nella sezione head della pagina html, quandi dichiari quale file css usare, aggiungi una regola che dice al browser di usare quel file solo quando la risoluzione è entro certi valori. Puoi inserire quanti css vuoi, basta che le regole non vadano in conflitto tra di loro.
    Esempio:

    <link rel='stylesheet' href='desktop.css' type="text/css" media='screen and (min-width: 481px)'/>
    <link rel='stylesheet' href='mobile.css' type="text/css" media='screen and (max-width: 480px)'/>

    Valerio Notarfrancesco


  • User

    Ciao vnotarfrancesco, grazie anche a te per il supporto.

    La tua alternativa mi è piaciuta molto e ho provato ad adottare proprio questa (decisamente più pulita e "usabile"), visto che così facendo potrei anche (se non erro) tenere la pagina in .html .

    Dato che il mio problema si riferisce all'altezza e non alla larghezza del sito ho cambiato il codice in (riporto direttamente dal sito).

    
    <link href="css/stile-sito.css" rel="stylesheet" type="text/css" media="screen and (min-height: 960px)" />
    <link href="css/stile-sito2.css" rel="stylesheet" type="text/css" media="screen and (max-height: 959px)" /> 
    ```Tuttavia, nonostante tale codice risulti interleggibile anche a me, e sembrerebbe non contenere errori, il sito non "obbedisce" ancora agli ordini.
    
    Per comodità entrambi i CSS sono ancora identici, ho solo cambiato lo sfondo del body per distinguere l'uno dall'altro (e vedere quale adottava il browser in base alla risoluzione) e ho così notato che in ogni caso, (che provi sul portatile con risoluzione a 1280x800  o sul fisso a differenti risoluzioni da 1280x1024 a 1280x768) viene sempre e solo caricato il css "stile-sito2.css".
    
    Credo il tutto sia ancora imputabile a qualche mio errore, se vi va di "testare" anche a voi il sito in questione è:
     www ignaziociarmoli com/mytest/sito-orizzontale/sito-orizzontale html 
    
    Inoltre vista la vostra disponibilità, vi chiedo conferma del fatto che se per evitare l'indicizzazione di "mytest" e tutto il suo contenuto da parte degli spider va bene la stringa inserita nel robots.txt:
    *User-agent: *
    Disallow: /mytest
    
    *Grazie ancora per il supporto, e *"a buon rendere"  :)
    
    Edit: *Ho notato inoltre che IE(8) con questo nuovo codice non trova nessun CSS associato alla pagina.

  • ModSenior

    Per IE 8 ho letto sul sito ufficiale solo adesso che è vero che supporta la proprietà ma solo per impostare gli elementi e non per interrogarli. C'è scritto però che IE9 la gestisce già dalla beta. Mi dispiace dovrai usare allora un'altra tecnica.

    P.S.
    Comunque quello che hai fatto funziona con altri browser.

    Valerio Notarfrancesco


  • User

    Grazie Valerio, ho provato con il javascript del post n°7 e funziona, (ovviamente con le modifiche al link dei miei CSS come suggeriva Giapox) certo meno elegante, avrei preferito usare la soluzione che mi hai consigliato tu, ma vabè, la terrò a mente per altri progetti, e di certo ho imparato qualcosa di nuovo e molto utile.

    Tornando alla mia pagina test, io ho provato con Firefox e IE e mi dava sempre lo stesso errore, ma visto quello che mi dici adesso tu, riproverò con più attenzione, magari svuotando la cache..

    Grazie ancora.

    Edit: visto che abbiamo concordato la risoluzione del problema, potresti cortesemente togliere il mio nome e cognome dal post sopra? A me non è più permesso modificare, grazie.


  • Moderatore

    @Gnaz2104 said:

    Edit: visto che abbiamo concordato la risoluzione del problema, potresti cortesemente togliere il mio nome e cognome dal post sopra? A me non è più permesso modificare, grazie.

    Scusami, parli del nome e cognome che compaiono nell'url del tuo sito? Vuoi che cancelli quella riga?


  • Consiglio Direttivo

    Ciao gnaz2104 e benvenuto nel Forum GT.
    La modifica al thread non è possibile; non mi risulta siano tra l'altro presenti dati personali e/o sensibili, ma solo un url che hai liberamente deciso di inserire.
    Mi raccomando quindi di valutare questo aspetto e quanto prescrive il regolamento per la scrittura dei tuoi successivi post. 🙂

    3.10. Il forum mette a disposizione dell'autore di ogni post la possibilità di editarlo entro 30 minuti dall'invio. Verificate attentamente i vostri messaggi; dopo tale periodo il post non è più modificabile, questo al fine di garantire una coerente continuità dello sviluppo degli argomenti.

    3.11. L'autore del post è unico e pienamente responsabile per possibili diffamazioni da lui stesso riportate nei topic.
    La modifica di un post dopo i 30 minuti è da considerare un'eccezione e consentita su richiesta solo in casi gravi e particolari.


  • User

    Si grazie, o se vuoi, per mantenere il post più leggibile puoi eliminare tutto il paragrafo in cui rimando al mio sito per effettuare il test di visualizzazione, anche perchè una volta finito cancellerò la cartella, ed anche se non è un link attivo, è pursempre brutto dare ai posteri "link" non più presenti nelle discussioni. 🙂

    E ancora grazie per il supporto, sto ridimensionando tutte le regole ed immagini del secondo css, e sembra funzionare tutto alla perfezione.

    Edit: Visto adesso quanto riportato da lorenzo-74.
    Diciamo che la modifica richiesta riguarda appunto una situazione di "futura alterabilità della discussione" nel momento in cui la cartella non sarà più disponibile sul sito, di dati sensibili a parte il nome e cognome, non credo ce ne siano. 🙂