+ Rispondi alla Discussione
Risultati da 1 a 18 di 18

Cambiare CSS in base alla risoluzione del monitor

Ultimo Messaggio di Gnaz2104 il:
  1. #1
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36

    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.
    Ultima modifica di giapox; 13-01-11 alle 20:50 Motivo: No sms style, maiuscole e punteggiatura.

  2. #2
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    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:
    Codice:
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    Ho aggiunto la seguente stringa:
    Codice:
    <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?
    Ultima modifica di giapox; 13-01-11 alle 20:51 Motivo: Maiuscole e punteggiatura.

  3. #3
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    Ciao Sark! Non saprei ma mi sembra una soluzione adatta! Funziona?

  4. #4
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    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?
    Ultima modifica di giapox; 14-01-11 alle 14:37 Motivo: Maiuscole.

  5. #5
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    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.
    Ultima modifica di giapox; 14-01-11 alle 14:37 Motivo: Maiuscole e punteggiatura.

  6. #6
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    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
    Codice 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>

    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:
    Codice 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>

  7. #7
    User
    Data Registrazione
    Nov 2007
    Località
    web/htdocs
    Messaggi
    36
    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:

    Codice:
    <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.
    Ultima modifica di giapox; 14-01-11 alle 14:38 Motivo: Maiuscole e punteggiatura.

  8. #8
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    Ottimo! Sembra perfetto anche a me. In effetti mi sa che il mio codice non avrebbe funzionato, ma almeno il concetto era quello! :P

  9. #9
    User L'avatar di Gnaz2104
    Data Registrazione
    Nov 2010
    Località
    Como
    Messaggi
    33
    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.
    presto ne avrò una..

  10. #10
    Moderatore L'avatar di giapox
    Data Registrazione
    Apr 2009
    Località
    Fréjus
    Messaggi
    755
    Segui giapox su Twitter Aggiungi giapox su Facebook Aggiungi giapox su Linkedin
    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.

  11. #11
    User L'avatar di Gnaz2104
    Data Registrazione
    Nov 2010
    Località
    Como
    Messaggi
    33
    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.
    presto ne avrò una..

  12. #12
    ModSenior L'avatar di vnotarfrancesco
    Data Registrazione
    Oct 2009
    Località
    Torino
    Messaggi
    16,157
    Segui vnotarfrancesco su Twitter Aggiungi vnotarfrancesco su Google+ Aggiungi vnotarfrancesco su Linkedin
    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
    MODSeo e Tecnologie
    Per consigli e strategie SEO seguimi su Google Plus +Valerio Notarfrancesco - Twitter
    Seconda edizione Seo Power

  13. #13
    User L'avatar di Gnaz2104
    Data Registrazione
    Nov 2010
    Località
    Como
    Messaggi
    33
    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).
    Codice:
    <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.
    Ultima modifica di Gnaz2104; 14-01-11 alle 11:44
    presto ne avrò una..

  14. #14
    ModSenior L'avatar di vnotarfrancesco
    Data Registrazione
    Oct 2009
    Località
    Torino
    Messaggi
    16,157
    Segui vnotarfrancesco su Twitter Aggiungi vnotarfrancesco su Google+ Aggiungi vnotarfrancesco su Linkedin
    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
    MODSeo e Tecnologie
    Per consigli e strategie SEO seguimi su Google Plus +Valerio Notarfrancesco - Twitter
    Seconda edizione Seo Power

  15. #15
    User L'avatar di Gnaz2104
    Data Registrazione
    Nov 2010
    Località
    Como
    Messaggi
    33
    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.
    Ultima modifica di giapox; 14-01-11 alle 13:18 Motivo: Maiuscole.
    presto ne avrò una..

  16. #16
    Moderatore L'avatar di giapox
    Data Registrazione
    Apr 2009
    Località
    Fréjus
    Messaggi
    755
    Segui giapox su Twitter Aggiungi giapox su Facebook Aggiungi giapox su Linkedin
    Citazione Originariamente Scritto da Gnaz2104 Visualizza Messaggio
    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?

  17. #17
    Consiglio Direttivo L'avatar di lorenzo-74
    Data Registrazione
    Jan 2007
    Località
    Roma
    Messaggi
    13,520
    Segui lorenzo-74 su Twitter Aggiungi lorenzo-74 su Facebook
    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.

  18. #18
    User L'avatar di Gnaz2104
    Data Registrazione
    Nov 2010
    Località
    Como
    Messaggi
    33
    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.
    Ultima modifica di Gnaz2104; 14-01-11 alle 13:47
    presto ne avrò una..

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.