Creare due div con la stessa altezza via jquery

Sto realizzando la nuova grafica di ziobudda.net e mi sono trovato nella situazione di dover gestire l'altezza di due div affiancati, ovviamente dinamici ed ovviamente impossibilitati a definire un qualsiasi valore di minimo o massimo. Meno male che con poche righe di jquery si sistema tutto.
Vi presento subito lo script che è talmente piccolo da essere comprensibile alla quasi totalità dei lettori.
if ($("div.col1").height() > $("div.col2").height()) {
$("div.col2").height($("div.col1").height());
} else {
$("div.col1").height($("div.col2").height());
}
Come vedete tutto si basa sulla funzione height() di jquery che ritorna l'altezza, in pixel, dell'elemento a cui è agganciato se non viene passato nessun parametro, oppure imposta la nuova altezza se viene passato un parametro (l'altezza da settare). Prima che i puristi delle performance mi aggrediscano metto le mani avanti ed è ovvio che il codice qui sopra non è studiato per essere veloce, ma per far comprendere il meccanismo alla base di tutto il discorso.
Il discorso non cambia se non avete solo due colonne, ma tre o quattro o di più: lo script da utilizzare è ugualmente semplice e si basa sul fatto che tutte le colonne da considerare condividono una stessa classe, nell'esempio qui sotto "col", su cui basarsi per fare il conto di quale sia la colonna più alta:
var max= 0;
$("div.col").each(function(){
if ($(this).height() > max) { max = $(this).height(); }
});
$("div.col").height(max_height);
Ed ovviamente questo codice sostituisce quello di prima, migliorando anche le performance, perchè il numero di richieste alla funzione height() passa da quattro a 3 nel caso di due sole colonne da considerare.
Trackback URL for this post:
- Add new comment
- 453 reads
-





