Caricamento condizionale JavaScript in design reattivo

Question

Sto cercando di fare qualcosa che penso dovrebbe essere piuttosto semplice, ma non ho trovato una spiegazione semplice della soluzione.

Sto costruendo un sito Web reattivo che è mobile per primo (larghezza 320px come impostazione predefinita). A quella piccola risoluzione, il sito è una colonna e sono felice di consentire a ogni singola "scatola" di espandersi o contrarsi all'altezza naturale del contenuto contenuto all'interno.

Tuttavia, a risoluzioni più grandi in cui il sito si espande a tre colonne, voglio aggiungere una piccola funzione JavaScript per eguagliare le altezze delle caselle di ciascuna colonna. La funzione di cui sto parlando sarebbe qualcosa di simile:

    jQuery(document).ready(function() {
    setHeight('#inner-footer .widget-area');
});

var maxHeight = 0;
function setHeight(column) {
    //Get all the element with class = col
    column = $(column);
    //Loop all the column
    column.each(function() {       
        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
    //Set the height
    column.height(maxHeight);
}

Ho trovato diversi modi per fare ciò di cui sto parlando.

1. Posso usare la funzione "carico" modernizr (formalmente yesnope.js).
2. Utilizzando una funzione personalizzata che incorpora la funzione "ismedia" di Nicholas Zakas come descritto in questo collegamento JavaScript specifico dei media o
3. una funzione JavaScript personalizzata che utilizza la variabile "screenwidth" come in
   var screenWidth = (screen.width < 768) ? true : false;
   come descritto in Query dei media nel mondo reale

Con la mia conoscenza limitata JavaScript, non sono stato in grado di scrivere effettivamente il codice per ottenere uno di questi approcci al lavoro per il mio script. Qualcuno può aiutarmi qui?

Non ho una preferenza particolare per l'approccio, voglio solo che funzioni browser incrociato, ecc. Il mio senso è che il Modernizr L'approccio è il modo più robusto e stabile per far funzionare questo nel maggior numero di casi d'uso, ma non ne sono del tutto sicuro. Non ho mai modificato Modernizr, quindi non sono sicuro di come scrivere e dove mettere la funzione di carico personalizzato.

Qualcuno ha pensieri e codice specifico per l'approccio Modernizr o qualche altra soluzioni (o qualcos'altro)? Apprezzo molto l'assistenza.

Answer 1

Modernizr può verificare che le query multimediali si applicino con la funzione modernizr.mq ()

Lo passi la tua query multimediale che vuoi che corrisponda in questo modo

if(Modernizr.mq('all and (min-width: 768px)')) {
    // Equal height code here
}

Qui una volta che la larghezza del min è passata 768px, il codice all'interno della funzione verrebbe chiamato, quindi per te il codice di altezza uguale.

Answer 2

Puoi provare a utilizzare MatchMedia, questo ti consentirà di caricare JS specifici in base alle query multimediali.

https://developer.mozilla.org/en/dom/window.matchmedia

Paul Irish ha lavorato su alcuni polyfill

https://github.com/paulirish/matchmedia.js/

Spero che sia di aiuto

Ian