in Code, Kompjuteri i IT |

Izjednačavanje visine dva diva sa JavaScript-om [en]

Često mi se dešavalo da tragam za rešenjem kako da dva diva koja su pritom nezavisna (nisu u odnosu otac – dete) jedan od drugog uvek imaju istu visinu. Div može imati ili fiksnu ili automatsku, ako je automatska ona se menja u zavisnosti od sadržaja ili inline elemenata koji se nalaze u njemu. Ono što generalno predstavlja problem jeste što jedan div ne može da zna kolika je visina drugog diva.

Jedini slučaj kad jedan div “zna” visinu drugog je kada su u odnosu “otac-dete” i pritom “dete” div nasledi visinu od “oca”. Pošto to nije slučaj u primeru o kojem govorimo, moramo se poslužiti css hackovima ili JavaScriptom. U css-u ne postoji elegantno rešenje ili rešenje koje radi u svim browserima, i još se pri tome moraju koristiti css hakovi sa kojim css kod neće biti validan. Ovoga puta prednost dajem JavaScript-u.

Najčešći slučaj kada ćete želeti da divovima izjednačite visinu jeste kada sidebar tj. leva ili desna kolona treba da “prati” glavni div u kojem je sadržaj.

Evo JavaScripte koju sam napisao a može vam pomoći u prevazilaženju ovog problema.

  1.  
  2. /*
  3.   ————————————————
  4.   Izjednaciti dva diva (html elementa) 1.1.0
  5.   Copyright (c) 2005 Djurdjevac Ivan
  6.   http://www.rednetcat.com
  7.   e-mail: djurdjevac@gmail.com
  8.   Version: 1.1.0
  9.   ————————————————
  10. */
  11.  
  12.  
  13. function getElementHeight(Elem) {
  14.                 if(document.getElementById) {
  15.                         var elem = document.getElementById(Elem);
  16.                 } else if (document.all){
  17.                         var elem = document.all[Elem];
  18.                 }
  19.                 xPos = elem.offsetHeight;
  20.                 return xPos;
  21. }
  22.  
  23.  
  24. function setElementHeight(id, elementHeight) {
  25.         var vid = document.getElementById(id);
  26.         vid.style.height = elementHeight + ‘px’;
  27. }
  28.  
  29. function IzjednaciElemente(imediva1, imediva2) {
  30.         var v1 = getElementHeight(imediva1);
  31.         var v2 = getElementHeight(imediva2);
  32.         var nv;
  33.         if (v1>=v2) nv=v1;
  34.         if (v1<v2)  nv=v2;
  35.         setElementHeight(imediva2, nv);
  36.         setElementHeight(imediva1, nv);
  37. }
  38.  

Samo ne zaboravite da funkciju IzjednaciElemente(imediva1, imediva2) pozovete prilikom kreiranja HTML stranice.

  1.  
  2. <!– pre bodi-ja –>
  3. <body onload="IzjednaciElemente(‘imediva1’, ‘imediva2’)">
  4. <!– posle bodija –>
  5.  

Published

Write a Comment

Comment

  1. Hello!!!
    I am using the theme like you, but I read some of ur CSS while you are much more clear than mine one, would u send your template to me!!!
    I cannot read ur language, just English only……

    Thx in advanced no matter you would like to send or not.

    pinreader

    Reply to Pinreader