Visualizzazione risultati 1 fino 5 di 5

Discussione: Script funziona solo se vado in "ispeziona"

  1. #1
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito Script funziona solo se vado in "ispeziona"

    Ciao,
    ho realizzato questo codice per aumentare e diminuire le colonne di una griglia con JavaScript usando gli attributi "data-*":
    Codice:
    const addMultipleListeners = (el, types, listener, options, useCapture) => {
      types.forEach(type =>
        el.addEventListener(type, listener, options, useCapture)
      );
    };
    addMultipleListeners(
      window,
      ['resize', 'load'],
      () => {
    var grid = document.getElementById('grid');
        if (window.innerWidth < 600) {
    		grid.setAttribute('data-columns','1');
    	} else if (window.innerWidth < 700) {
    		grid.setAttribute('data-columns','2');
    	} else if (window.innerWidth < 800) {
    		grid.setAttribute('data-columns','3');
    	} else if (window.innerWidth < 900) {
    		grid.setAttribute('data-columns','4');
    	} else if (window.innerWidth < 1000) {
    		grid.setAttribute('data-columns','5');
    	} else if (window.innerWidth < 1200) {
    		grid.setAttribute('data-columns','6');
    	} else if (window.innerWidth < 1400) {
    		grid.setAttribute('data-columns','7');
    	} else if (window.innerWidth < 1600) {
    		grid.setAttribute('data-columns','8');
    	} else if (window.innerWidth < 1700) {
    		grid.setAttribute('data-columns','9');
    	}
    });
    ma funziona solo quando vado in ispeziona e se provo a ridurre la pagina in realtà non segue le indicazioni come in ispeziona ma si ferma a 6 colonne quando dovrebbe arrivare a 8.

    Qualcuno mi può aiutare?
    Grazie

  2. #2
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,978

    Predefinito

    Salve,
    a prima vista così il codice mi sembra a posto. Sarebbe però utile disporre di un demo per poter testare il codice.

    Può riportare un link ad una pagina dimostrativa in cui fa uso del codice?

    Cordiali saluti.

  3. #3
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito

    ecco il link:http://tuttainformatica.altervista.o...php?p=g&m=grid
    praticamente per la dimensione del mio schermo io dovrei vedere 8 colonne quando carico la pagina e invece ne vedo 9, poi se vado in ispeziona diventano 8 oppure se riduco chrome manualmente le colonne diminuiscono e aumentano. Se chiudo ispeziona oppure riporto chrome a tutto schermo rimangono 8 colonne

  4. #4
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    3,978

    Predefinito

    Ho fatto alcune prove, ma non ho capito da cosa possa dipendere quel comportamento.

    Ha provato anche usando solo i flexbox?

    Qualcosa del genere:
    Codice HTML:
    <style>
    .flexBox {
      display: flex;
      flex-wrap: wrap;
      background-color: #CCCCCC;
    }
    .flessibile4 > div {
      width: 100px;
      margin: 10px;
    }
    </style>
    <div class="flexBox">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      ............ 
      <div>25</div>
    </div>
    Cordiali saluti

  5. #5
    tuttainformatica non è connesso Utente giovane
    Data registrazione
    05-03-2020
    Messaggi
    55

    Predefinito

    Sto provando anche i flexbox... vedo se riesco a combinare qualcosa... sto ancora sperimentando

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •