Ionut Stoica

Programator PHP / Frontend developer / Pasionat de Electronica Auto
23May

Tutorial jQuery – Egalizare inaltime coloane

Caz concret:

Dorim sa avem un grid cu produse, doar ca un produs poate avea 2 linii de descriere, altul poate avea 10.

O rezolvare “din topor” ar fi sa folosim o inaltime fixa, dar ce faci cand ai inaltimea fixa pentru 10 randuri dar tu defapt ai 2 pentru toate elementele din grid?

Solutia este folosirea JavaScript, dar pentru ca intr-un site cel mai probabil vei avea nevoie de un framework JS pentru functii avansate (stii, chestia aia cu reinventarea rotii) probabil vei folosi prototype, jquery, dojo sau mootools.
In cazul meu preferatul este jQuery.

Rezolvarea:

Pe scurt:
1. Definim o variabila care ne va pastra dimensiunea cea mai mare (in cazul de fata inaltimea).
2. Luam toate elementele dorite intr-un “array”.
3. pentru fiecare element in parte verificam inaltimea si daca este mai mare decat ce avem in variabila definita anterior updatam valoarea cu noua inaltime.
4. Dupa parcurgerea intregului DOM de elemente putem trece la setarea inaltimii.
5. Setarea inaltimii. Aici avem cel putin 2 moduri de realizare:
5.1. Parcurgem din nou array-ul de elemente si setam pentru fiecare in parte inaltimea.
5.2. Setam inaltimea tuturor elementelor cu jQuery in functie de clasa.

In exemplul urmator voi folosi varianta 5.2 care este mai rapida si mai putin cod de scris.

Pe lung :d

1. Asadar, incepem prin a defini o variabila initializata cu valoarea 0:

var Maximum = 0

2. Continuam prin a lua toate elementele ce dorim sa le modificam inaltimea:

$('.coloana')

3. Parcurgem acest array cu functia jQuery each:

$('.coloana').each(function(){
    tmp = $(this).outerHeight();
    if(tmp > Maximum) Maximum = tmp;
});

4. trecem peste 😛

5.1.

Varianta 1:

$('.coloana').each(function(){
    $(this).height(Maximum+'px');
});

Varianta 2:

$('.coloana').height(Maximum+'px');

Acum punand totul cap la cap si adaugand call-ul la document ready vom avea urmatorul script:

$(function() {
   var Maximum = 0
 
   $('.coloana').each(function(){
       tmp = $(this).outerHeight();
       if(tmp > Maximum)
           Maximum = tmp;
   });
 
   $('.coloana').height(Maximum + 'px');
});

Exemplul functional il gasiti aici.

Comments(0)

Leave a comment

Your email address will not be published.Field is required

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 Previous  All works Next