I dette eksempelet skal jeg vise hvordan man kan få elementer i HTML til å få samme høyde med hjelp av jQuery.
Scenario:
Vi har fem bokser som har ulik mengde innhold. Derfor har de fått forskjellige høyder også. Men vi ønsker at de skal ha samme høyde. Vi kan selvfølgelig sette en fast høyde på boksene med CSS eller gi boksene en minstehøyde.
Men la oss si at vi ikke vet hvor høy den høyeste boksen vil bli. Derfor kan vi ikke begrense høyden ved å sette en fast høyde eller sette en minstehøyde med CSS.
Derfor skal jeg vise deg et lite javascript for jQuery som finner høyden på det høyeste boksen og gir alle de andre boksen den høyden.
Eksempel
Jeg har laget et eksempel på scriptet for å sammenligne. http://eksempler.helgejohnsen.com/lik-hoyde-med-jquery/
HTML og CSS
Vi begynner med HTML som ser slik ut:
<div class="foreldre"> <div class="boks">Dette er boks 1.</div> <div class="boks">Dette er boks 2 med litt mer innhold enn den første boksen.</div> <div class="boks">Dette er boks 3.</div> <div class="boks">Dette er boks 4 og har mest innhold av alle boksene. Derfor er den en litt høyere enn de andre.</div> <div class="boks">Dette er boks 5 og har lik høyde som alle de andre boksene.</div></div>
Legg merke til at boksene er lagt inne i en DIV som har fått klassen foreldre. Vi fortsetter med å stilsette boksene litt med CSS:
.boks {
width: 135px;
border: 1px solid #aaa;
background: #eee;
float: left;
margin: 10px;
padding: 4px;
font-size: 12px;
}
Boksene ser nå slik ut:
jQuery
Så forstetter vi med litt jQuery. Først hentes den siste utgaven av jQuery med denne koden:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Så legger vi til en script-tag med document-ready for jQuery:
<script type="text/javascript">
$(document).ready(function() {
//her skal koden inn
});
</script>
Document-ready utfører koden vår når siden er ferdig lastet. Den sørger for at koden ikke forsøker å endre høyden på boksene før alt innholdet er ferdig lastet i nettleseren.
Ny funksjon
Vi begynner med å lage en funksjon. Vi kaller funksjonen for SameHeight (kunne brukt noe norsk, men like greit å bruke engelske ord pga at man fort havner i fella med å bruke ord med æøå).
$(document).ready(function() {
$.fn.SameHeight = function(px) { // Pkt 1
$(this).each(function(){ // Pkt 2
var minHeight = 0; // Pkt 3
$(this).children().each(function(i){ //Pkt 4
var height = $(this).height(); // Pkt 5
if (height > minHeight) { // Pkt 6
minHeight = height; // Pkt 7
}
});
$(this).children().css({'min-height': minHeight}); // Pkt 8
});
return this;
}
$('.foreldre').SameHeight(); // Pkt 9
});
Jeg har punktvis forklart hva som skjer i scriptet:
Pkt 1
Ny funksjon som har fått navnet SameHeight. Dette navnet trenger vi på pkt 9.
Pkt 2
I pkt 9 så forteller vi scriptet hvilken klasse den skal se etter. I eksempelet her så er det en DIV med klassen foreldre. Denne DIV-en kan være flere steder i dokumentet og koden ser nå etter alle steder.
Pkt 3
Her lager vi en variabel som kalles minHeight med verdien 0. Den skal brukes som referanse senere.
Pkt 4
Etter pkt 2 så ser scriptet etter alle barn av foreldre. I eksempelet er alle barna alle DIV-ene innenfor DIV-en med klassen foreldre. Med andre ord alle DIV-er med klassen boks i eksempelet.
Pkt 5
For hver boks så sjekkes høyden på DIV-en. Med andre ord, scriptet sjekker høyden på hver boks. Så lages en ny variabel med navnet height og den får høyden som boksen som verdi.
Pkt 6
Her sjekkes det om boksen er høyere enn minHeight.
Pkt 7
Hvis boksen har en høyde større enn minHeight så endres minHeight til den høyden på boksen. Med andre ord, hvis minHeight er lik 0 og høyden på boksen er lik 40 så endres minHeight fra 0 til 40.
Pkt 8
Her settes nå den nye minHeight på alle boksene.
Pkt 9
Her kalles funksjonen vi har laget. I koden ligger navnet på DIV-en som er rundt alle boksene: $(‘.foreldre’).SameHeight();
Resultat
Boksene går fra å se slik ut:
til å se slik ut:
Konklusjon
Dette scriptet er ikke nødvendigvis det beste, men er en fin øvelse i å forstå oppbygningen av jQuery og funksjoner. Har testet scriptet i IE6, IE7 og Firefox 3.6. Resultatet gies i piksler (px). For de som trenger em så må det i tillegg konverteres fra px til em.
