jquery.matchHeight Browser Tests

Scritto da il

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

Altezza uguale

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

Altezza-differente

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:

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

2. Nel footer

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

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:

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

Come avere elementi diversi alla stessa altezza

Fonte:
jquery-match-height

Sergio Pinna

Web Designer, esperto in costruzione siti web lato client e server. Conosco il CSS, HTML semantico, PHP e Wordpress. Disegno per il web siti internet, sono appassionato di cinema, mi piace la musica rock, e faccio un lavoro che non smette di appassionarmi.