Come avere elementi diversi alla stessa altezza

Come avere elementi diversi alla stessa altezza senza che quest’ultima dipenda dal contenuto? Altra domanda che uno si potrebbe porre è: e perché me ne dovrebbe interessare?

Perché il contenuto di un box dipende dal suo contenuto e se il testo è corretto per il box ad una determinata larghezza dello schermo non è detto che lo stesso lo sia per una larghezza differente

Ecco un esempio: l’immagine sottostante è l’immagine di una parte della mia home page, a larghezza dello schermo oltre 1200px, e come puoi vedere i due box hanno altezza uguali

Se riduco la larghezza dello schermo al di sotto dei 1200px non si hanno più le altezze uguali, come da immagine qui sotto:

Allora come faccio ad avere box della stessa altezza automaticamente e che siano indipendenti dal contenuto dei box stessi?

Ci vien in aiuto questo straordinario quanto semplice plugin jquery.matchHeight.js

Ed ecco come avere elementi diversi alla stessa altezza

La procedura è molto semplice:

1. Nel footer

Aggiungere nel footer:

<script src="jquery.matchHeight.js" type="text/javascript"></script>

(p.s.: controlla bene l’URL del plugin!)

2. Nel footer

Subito dopo, nel footer aggiungente anche quest’altro codice:

$(function() {
    $('.item').matchHeight(options);
});

3. La classe “item” da aggiungere

Ove vuoi che i box abbiano la stessa altezza aggiungi la classe item ai elementi corrispondenti

4. Opzionale – Le data API

Opzionalmente puoi usare le API. Usi l’attributo data-mh=”group-name” dove group-name è una stringa arbitraria che identifica quale elemento dovrebbe esser considerato come gruppo. Qui sotto puoi vederne un esempio:

<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>

Come vedi il plugin è molto semplice quanto molto potente da usare: aumenta sia il design del sito che la user experience dell’utente, il tutto ne migliora la leggibilità. Un altro plugin di jQuery che può aiutarti nella user experience è il ritorno in alto dinamico della pagina

E questo è l’esempio finale a dimensione inferiore ai 1200px

Fonte:
– jquery-match-height