Brainleaf
Web Resources

In questo tutorial vedremo come eseguire una semplice funzione per misurare l'altezza di alcuni elementi ed assegnare a tutti l'altezza dell'elemento più alto. Tutto questo ovviamente utilizzando JQuery.

In sostanza l'operazione è molto semplice: si esegue un ciclo each per misurare uno ad uno tutti gli elementi con una specifica classe (".exampleItem" nel nostro esempio) rintracciare il più alto e di conseguenza assegnarne l'altezza a tutti gli altri. Dichiariamo quindi una variabile che conterrà l'altezza massima rintracciata durante il ciclo di misurazione degli elementi. Dato che la variabile viene dichiarata prima dell'inizio del ciclo, sarà bene assegnargli un valore pari a zero, in quanto ancora non è stato misurato alcun elemento.
var maxHeight = 0
Eseguiamo la stessa operazione per dichiarare un'uteriore variabile che servirà come contenitore dell'altezza di ogni singolo elemento misurato.
var elementHeight = 0

Ora non resta che eseguire il ciclo vero e proprio. Quello che verrà fatto sarà sostanzialmente questo: Per ogni elemento avente la classe ".exampleItem":

  • misurane l'altezza ed archiviala nella variabile elementHeight
  • confronta il valore della variabile elementHeight con il valore della variabile maxHeight
  • Se il valore della variabile elementHeight è maggiore di quello della variabile maxHeight, allora assegna a quest'ultima il valore di elementHeight e procedi, altrimenti prosegui il cilco senza fare niente

$(".exampleItem").each(function(){
   elementHeight = $(this).height();
   if (elementHeight > maxHeight) { maxHeight = elementHeight }
});

Alla fine del ciclo lo script avrà assegnato alla variabile maxHeight la misura dell'elemento più alto. Ora si dovrà semplicemente assegnare questo valore a tutti gli elementi con classe ".exampleItem"


$(".exampleItem").height(maxHeight);

La funzione sameHeight()

Vediamo adesso come unire il tutto in un'unica funzione che chiameremo:
sameHeight()
Questa funzione avrà due diversi usi: il primo, che abbiamo appena visto, assegnera a tutti gli elementi l'altezza massima misurata; il secondo invece restituirà soltanto il valore dell'altezza massima.

La funzione accetterà due parametri:
L'elemento del DOM (una classe dato che si tratta di un confronto tra più elementi) e un boolean (true/false) per switchare da un uso all'altro della funzione.


function sameHeight(element,assign) {
    
    var maxHeight = 0;
        elementHeight = 0;
        
    $(element).each(function(){
        elementHeight = $(this).height();
        if (elementHeight > maxHeight) { maxHeight = elementHeight }
    });
    
    if (assign === true) {
        $(element).height(maxHeight);
    }else{
        return maxHeight;
    }
}

Per utilizzare la funzione basterà utilizzare la seguente sintassi:
sameHeight(".exampleItem",true)

Potete scaricare lo script e un file demo da GitHub Gist utilizzando il pulsante qui sotto.
Download

Joomla SEF URLs by Artio