jQuery Yükseklik Eşitle eklentisi
Web sayfanızda yan yana dizmiş olduğunuz kutular (genelde DIV alanları) var. Bu kutuların içeriğini, dinamik bir kaynaktan (veritabanından veya internetteki başka bir yerden) dolduruyorsunuz. Dolayısıyla yan yana dizilmiş olan kutuların yüksekliği her seferinde farklı farklı görüntüleniyor. Siz de bu kutuların yüksekliği, o anda yüksekliği en büyük olan kutuya göre otomatik olarak eşitlensin istiyorsunuz.
Senin sorunun ne adamım?
Giriş kısmında sorunun ne olduğunu biraz çıtlattım aslında ama biraz daha açıklayayım. Üzerinde çalıştığım son birkaç projede DIV etiketini kullanarak kutular oluşturmuştum. Bu kutuların içeriği sürekli değiştiği için yüksekliğini önceden tahmin edemiyordum. Örneğin alttaki ekran görüntüsünde kırmızı oklarla işaret ettiğim kutulara bakın. Diğer kutuların yüksekliği eşit iken bu iki kutunun yüksekliği birbirinden farklı.
eklentiden öncesi:
Her durumda kutuların yükseklikleri birbirlerine eşit olsun diye küçük bir jQuery eklentisi yazdım ve dağıtmaya karar verdim. Bu eklentiyi aşağıdaki kullanabilirsiniz:
<script type="text/javascript" src="jquery.yukseklikEsitle.js"></script>
<script type="text/javascript">
$(function(){
// kutuların yüksekliklerini eşitle
$('div.kutu').yukseklikEsitle();
});
</script>
eklentiden sonrası:
Sonuç
Eğer eklentiyi indirmek isterseniz eBurhan Araçları sayfasından indirebilirsiniz. Örnek bir uygulamasını ise demo sayfasında bulabilirsiniz. Açıkcası internette aynı işi yapan bir eklenti olup olmadığına fazla bakmadım. Birkaç Google aramasından sonra istediğimi bulamayınca kendim yazdım. Benim işime yaradığı gibi umarım başkalarının da işine yarar 
eline sağlık
gerçekten çok faydalı bir jQuery eklentisi oldu bu.
Ben bunu kullanırım ki..
Teşekkür Ederim.
Öncelikle eline sağlık eBurhan. Diyelim ki farklı “div”lerden oluşan (Örn: sag, orta, sol) kutularımız var. O halde kodumuzu her bir isim için çoğaltacakmıyız?
$(function(){
$('div.sag').yukseklikEsitle();
});
$(function(){
$('div.orta').yukseklikEsitle();
});
$(function(){
$('div.sol').yukseklikEsitle();
});
???
gel de jquery beğenme..adamlar sırf yayınlamak için eklenti yapıyorlar..ben eklentimi siteme koymaya korkuyorum çalmasınlar diye
@grafitus
$('div.sag, div.orta, div.sol').yukseklikEsitle();şeklinde kullanabilirsin. Hepsinin yükseklikleri eşitlenecektir.
Güzel bir eklenti olmuş. Acaba ‘Math.max’ kullanmak daha mı doğru olurdu?
ooowww çok başarılı bir yazı. eline emeğine sağlık
@Mehmet
zaten kutuların yüksekliklerini tek tek almak için döngü açmak gerekiyor. Math.max’ın ne gibi avantajı olabilir ? Ha dersin ki bütün kutuların yüksekliğini tek hamlede bir dizi olarak alabiliyoruz, döngü falan açmadan, o zaman Math.max kullanmak avantajlı olabilir.
Math.max ile bu şekilde oldu:
(function ($) {
$.fn.yukseklikEsitle = function () {
var yukseklikler = [];
var yukseklik;
this.each(function () {
yukseklik = $(this).height();
yukseklikler.push(yukseklik);
});
this.height(Math.max.apply(null, yukseklikler));
return this;
}
})(jQuery);
Sonuçta each kullanarak almak zorunda kaldim yukseklikleri, döngüden pek bir farkı kalmadı…
evet, önceki yorumumda anlatmak istediğim buydu işte
Faydalı olacak gibi görünüyor, teşekkürler (Er|Bur)han kardeşim
Mehmet selam bu 7. satırdaki push imgesi senin fonksiyonlarından biri mi yoksa ben mi daha önce görmedim?.
@ahmet
“push” metodu javascript’in doğal metodur. Bir dizinin sonuna yeni bir eleman eklemek için kullanılır.
http://www.w3schools.com/jsref/jsref_push.asp
Valla ne diyim, yaklaşık 5 saattir sitenizden ayrılamadım. Jquery makaleleriniz için çok çok teşekkürler. Doğrusu mest oldum.
Bana çok faydalı oldu, gerçekten bu kadar olur, emeğinize saygılar . . .
ifadeler yetersiz kalır bu durumlarda, abarttığımı düşünen olmasın, ifadeler kifayetsiz kalıyor.
bir sorum olacak…benim sitemde gövdeyi oluşturan div ve içinde sol ve sağ divler var…gövde div’nin boyunu auto diyince sol ve sağ divlere göre kendini ayarlamıyor (sol ve sağ divler ortalam 600px diyelim ) 100px gibi bişi kalıyor.yani sayfa bozuluyor…
ben bu eklenti ile sağ ve gövde divlerinin kendisini sol div’e göre ayarlanmasını sağlayabilirmiyim ???
@Ali Gündoğan
anladığım kadarıyla gövdeyi oluşturan DIV etiketinde kapsayamama sorunu var.
Çok teşekkür ederim. Mükemmel!..