Javascript ile Kutu (div) Boyutlarını Eşitleme

10 Haziran 2015

minimalcoding

3591 0

Javascript ile Kutu (div) Boyutlarını Eşitleme

Bir çok Front-End Developer’ın karşılaşmış olduğu sorunlardan bir tanesi içerik girişi yapılmış divlerin boy orantılarının birbirinden farklık göstermesidir. Tasarımcı metin alanlarının hepsinin eşit olacağını hayal eder ve ortaya yan yana sıralanmış eşit uzunlukta aynı karakter sayısına sahip kutular oluşturur, ama bu kutuların içerisine gerçek içerikler girilmeye başlandığında hayal edilen ile gerçekleşen yapı aynı değildir,uzunlu kısalı kutular tasarım bütünlüğünden ve görselliğinden artık kopmuş , tasarımdaki güzelliği yansıtamaz hale gelmiş ve sonunda mutusuz bir müşteri profili orataya çıkmıştır. Akla ilk gelen çözümlerden bir tanesi ; kutu boylarına eşit uzunluk verip ( height:150px) taşma alanlarını gizlemek (overflow:hidden) gelebilir ama buda kullanıcılara anlamsız yerde kalan içerikler oluşturacaktır, ikinci yöntem sabit karakter sınırlaması; yani bu div içine max karekter basmak olacaktır, sonuç ilk yöntem ile aynı, anlamsız içerik. Peki ya çözüm?..

Çözümlerden bir tanesi en uzun içeriğe sahip divi baz alıp diğer divlerin boylarını eşitlemek olabilir…

Şimdi sizlere bu yöntemden bahsedeceğiz..

Javascript Kodu




$(document).ready(function ($) {
// ----------------------------------------------------- MaxHeight
    $(".max_h_c").each(function(j,d) {
        var maxHeight = 0;
        $(d).find('.max_h').each(function (i,e) {
            if(maxHeight < $(e).height()) maxHeight = $(e).height();

        });
        $(d).find('.max_h').height(maxHeight);
    });
});//-- End Ready

$(document).ready(function ($) {

// ----------------------------------------------------- MaxHeight

$(".max_h_c").each(function(j,d) {

var maxHeight = 0;

$(d).find('.max_h').each(function (i,e) {

if(maxHeight < $(e).height()) maxHeight = $(e).height();

});

$(d).find('.max_h').height(maxHeight);

});

});//-- End Ready

Html Yapısı




<div class="container max_h_c">
    <!-- Item 1-->
    <div class="box">
        <figure>
            <img src="img/img1.jpg" alt="imgName">
        </figure>
        <div class="box-content max_h">
            <h3>Lorem Ipsum</h3>

            <p>
                Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus
                sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet
                ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.
            </p>
        </div>
    </div><!-- Item End-->

    <!-- Item 2-->
    <div class="box">
        <figure>
            <img src="img/img3.jpg" alt="imgName">
        </figure>
        <div class="box-content max_h">
            <h3>Lorem Ipsum</h3>

            <p>
                Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus
                sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet
                ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.
            </p>
        </div>
    </div><!-- Item End-->

    <!-- Item 3-->
    <div class="box">
        <figure>
            <img src="img/img3.jpg" alt="imgName">
        </figure>
        <div class="box-content max_h">
            <h3>Lorem Ipsum</h3>

            <p>
                Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus
                sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet
                ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.
            </p>
        </div>
    </div><!-- Item End-->
</div>

</figure>

<h3>Lorem Ipsum</h3>

<p>

Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus

sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet

ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.

</p>

</div>

</div>

</figure>

<h3>Lorem Ipsum</h3>

<p>

Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus

sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet

ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.

</p>

</div>

</div>

</figure>

<h3>Lorem Ipsum</h3>

<p>

Nunc ullamcorper neque a turpis ornare, auctor luctus ipsum mollis. Curabitur tincidunt posuere risus

sed egestas. Praesent ullamcorper quis metus in molestie. Duis sit amet fringilla nunc, sit amet

ultrices lorem. Suspendisse in blandit tellus, eget tincidunt lacus.

</p>

</div>

</div>

</div>

Örnek

See the Pen pJwNQG by MinimalCoding (@MinimalCoding) on CodePen.

Javascript ile Kutu (div) Boyutlarını Eşitleme

Javascript Kodu

Html Yapısı

Örnek

Yorum yap