Modificare css in base alla risoluzione

[GianlucaB]

Salve, ho creato un semplice script che modifica alcuni parametri del css in base alla risoluzione.

Il codice è molto semplice

<script language="javascript">

function ridimensiona() {
      document.getElementById('Intestazione3').style.width = "850px";
      document.getElementById('BannerVideo').style.marginLeft = "350px";
      document.getElementById('BannerVideo').style.marginTop = "1px";     
}
 var larghezza = window.screen.width;
 if  (larghezza<1024) {
ridimensiona();
}
</script>

In pratica leggo la larghezza dello schermo, e se questo è inferiore a 1024pixel modifico dimensione e posizione di 2 div.

Il codice funziona, però il problema è che funziona solo se lo inserisco in fondo alla pagina, cioè se lo inserisco dopo aver inserito i 2 div in questione.

Se tale codice lo inserisco ad inizio pagina, prima di aver inserito i 2 div, il codice non funziona più.

Ora il problema è che mettendolo a fondo pagina, quando vine utilizzato un dispositivo con larghezza inferiore a 1024 pixel, viene prima caricata la pagina, e poi modificata, con il risultato che vine caricata la pagina tutta sconquassata, e poi solo dopo viene aggiustata.

C'è modo di evitare questo inconveniente?

Grazie.

[Vindav]

puoi usare css3 e le media queries, per maggiori info chiedi nella sezione apposita

[tampertools]

Puoi usare le media queries css:

@media (max-width: 1024px) {
  #Intestazione3 {
    width: 850px;
  }
  #BannerVideo {
    margin-top: 1px;
    margin-left: 350px;
  }
}

[GianlucaB]

Grazie a tutti per le risposte.
Ho provato il sistema @media e funziona perfettamente.

Solo che volevo avere il controllo tramite javascript, perchè vorrei ad esempio non ridimensionare se è presente un blocco pubblicità.

Spiego meglio.

Il div #BannerVideo verrebbe messo alla sinistra di un articolo contenuto nel div #Intestazione.

In pratica si ha div #Intestazione div #BannerVideo affiancati.

Quando però l'utente utilizza un dispositivo con la larghezza inferiore a 1024px, ma probabilmente lo imposterò a 800px accade che il div Intestazione, si rimpicciolisce e si allunga di conseguenza.

Allora per evitare di avere un articolo stretto e lungo, nel caso l'utente stia visualizzando con larghezza inferiore a 800px ho pensato di allargare tutto l'articolo e mettere il banner sotto.

Però vorrei pure allargare tutto l'articolo, quando l'utente utilizza un blocco pubblicità, infatti non ha senso lasciare un quadrato vuoto all'interno della pagina.

Ecco quindi che mi servirebbe poter modificare la larghezza del div direttamente utilizzando javascript.

Grazie

[tampertools]

Però vorrei pure allargare tutto l'articolo, quando l'utente utilizza un blocco pubblicità, infatti non ha senso lasciare un quadrato vuoto all'interno della pagina.

Questa è una domanda completamente diversa... Come fai a sapere se l'utente ha un blocco pubblicità?

[GianlucaB]

Ho visto che ci sono in giro codici javascript, che rilevano il blocco pubblicità.

Normalmente questi codici vengono utilizzati per far apparire un pop-up che invita a togliere il blocco pubblicità.

Io lo utilizzerei solo per evitare di lasciare un buco bianco, dove ci dovrebbe essere un banner pubblicitario.

Quindi una volta creata la funzione javascript che ridimensiona e/o sposta i vari div, poi la posso richiamare sia nel caso di blocco pubblicità, e sia nel caso si stia utilizzando un dispositivo con larghezza inferiore a 800px, dove il banner pubblicitario messo di fianco all'articolo diventerebbe troppo ingombrante.

[tampertools]

Puoi fare così:

@media (max-width: 1024px) {
  #BannerVideo {
    margin-top: 1px;
    margin-left: 350px;
  }
}

.no-ads #BannerVideo {
  margin-top: 1px;
  margin-left: 350px;
}

if (nonCèLaPubblicità) {
  document.querySelector("html").classList.add("no-ads");
}

[GianlucaB]

Scusate prima di tutto, per l'assenza prolungata, ma ho avuto altri problemi.

Comunque il sistema @media, era perfetto, se non fosse che mi crea dei casini con i banner.

In pratica utilizzo Iubenda, per far apparire il famoso popup di consenso per l'utilizzo dei cookie, e grazie a iubenda utilizzo pure un loro sistema per bloccare preventivamente i codici javascript dei banner.

Il sistema consiste nel sostituire al classico <script type="text/javascript"> un <script class="_iub_cs_activate-inline" type="text/plain">


In questo modo il codice javascript non viene eseguito fino a quando non viene dato il consenso ai cookie.

Questo sistema però stranamente va in conflitto con il sistema @media, ovvero se modifico i div con il sistema @media i banner vanno per i fatti loro, senza rimanere all'interno dei div.

Se invece non modifico lo javascript con il sistema fornito da iubenda, tutto funziona bene.

Ho già pure consultando Iubenda, che stanno cercando di risolvere questo problema, ma ad oggi non c'è ancora una soluzione, quindi per ora mi trovo costretto a rinunciare al sistema @media e a tornare al vecchio javascript.

Quindi ritorniamo al problema iniziale, ovvero è possibile fare in modo che vengano eseguiti subito i ridimensionamenti, prima che la pagina venga completamente caricata?
Perchè come già detto, se prima la pagina vine caricata, e le modifiche ai vari div avvengono dopo, mi ritrovo una pagina tutta sconquassata che si sistema solo dopo alcuni secondi.

Grazie, e scusate ancora la lunga assenza.