Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

jQuery İle DIV Uzunluklarını Ayarlamak – Control DIV Height With jQuery

Halk firmasına ait bir proje için arayüz kodlamasını yaparken arama sayfasında başıma gelen bir sorunu yazılım şefimiz Kerim ÇALIK ile tartışırken aklımıza geldi bu yöntem. Bazen yan yana duran iki divimiz olduğunda biri diğerinden uzun olabiliyor. Bu durumu yine bazı scriptler ile de çözebiliyoruz fakat jQuery’ nin sloganını hatırlamamızda fayda var “Write less, do more – Az yaz, çok yap”. Aynen bu şekilde birazdan size hazırladığım örneği anlatacağım.

Adım – 1 HTML Kodlarını Eklemek

<div id="Main">
<div class="Sol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna.

Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum.

Aliquam erat volutpat. Praesent pharetra nisi vitae eros adipiscing et molestie massa molestie. Etiam aliquam, nunc vel condimentum vestibulum, lectus quam lobortis erat, nec lacinia lectus ligula at enim. Proin blandit dignissim risus a eleifend. Maecenas aliquam rutrum gravida. Pellentesque dictum, diam nec elementum vehicula, nunc odio sollicitudin turpis, in luctus dui leo vel turpis. Curabitur vestibulum rutrum leo et luctus. Donec auctor risus tempus lorem lacinia at aliquet turpis eleifend. Curabitur id lacus nunc. Sed ac est nunc, vitae ultrices neque. Cras purus eros, accumsan at congue sit amet, facilisis vel eros. Etiam sagittis mattis egestas. Aliquam vitae facilisis massa. Fusce vel leo quis felis vulputate pretium. Etiam laoreet nisi in augue rutrum pulvinar. Praesent luctus mattis sapien sed faucibus. Nulla eu ipsum sapien. Donec non diam est. </p>
</div>
<div class="Sag">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus dui ante. Phasellus aliquet elit in ipsum lacinia porta. In hac habitasse platea dictumst. Morbi condimentum bibendum metus, sit amet dictum neque cursus eget. Sed venenatis tortor in lectus fermentum quis tempor nisi condimentum. Nunc metus arcu, tempor quis laoreet a, vulputate a lorem. Praesent eget tellus erat. Suspendisse porttitor urna risus, nec egestas purus. Ut vitae accumsan risus. Aenean mollis nisl ut tortor porttitor lobortis. Nullam gravida lorem sit amet dui ullamcorper lobortis. Duis vitae lacus a nibh egestas molestie at ut odio. Nulla leo risus, feugiat vel fringilla nec, sollicitudin vel lacus. Sed a commodo sapien. Maecenas aliquet neque ut tellus faucibus viverra. Maecenas in nisi felis. In magna nibh, lacinia vitae pretium in, aliquam ac justo. Nulla enim purus, aliquam non ullamcorper vestibulum, feugiat vel urna.

Morbi euismod commodo dolor, sed iaculis risus semper ultrices. Etiam lobortis feugiat ante id sollicitudin. Sed interdum vehicula diam, in rutrum nisl condimentum non. Donec fringilla, magna vel interdum rhoncus, augue lacus ultricies eros, eget pretium ipsum dolor a sem. Aliquam in nisl ut nulla rutrum fringilla. Vestibulum nunc lacus, vestibulum at iaculis quis, sollicitudin gravida mi. Ut eros mauris, tempor sed congue vitae, dapibus non nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eu erat eget nisi facilisis suscipit non a sapien. Fusce ultrices lectus ut magna gravida pulvinar. Proin quis nunc in ipsum porta commodo nec in elit. Donec mollis elit ut sem tincidunt condimentum sollicitudin mauris interdum.</p>
</div>
<div class="Clr"></div>
</div>

Çok basit şekilde bir genel kapsayıcı ve içine de iki div yerleştirdik. Sol ve Sag isminde. Şimdi bunların bir de stillerini verelim;

Adım  2 – Css Kodlarını Eklemek

#Main { width:800px; height:100%; margin:0 auto; background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;}
.Sol { float:left; display:inline; width:630px; height:100%; background-color:#0099FF; color:#FFFFFF; margin-right:5px; padding:0px 10px;}
.Sag { float:left; display:inline; width:125px; height:100%; background:#CC6633; color:#FFFFFF; padding:0px 10px;}
.Clr { clear:both;}

Gördüğünüz gibi çok basit bir şekilde hemen stilleri ekleyip ön görünümü tamamladık. Burada dikkat etmeniz gereken bir kısım var; her iki divin de yükseklikleri 100% verilmiş durumda. Fakat biz birazdan bunları birbirlerinden yükseklik alacak şekilde ayarlayacağız. .Clr sınıfı kafanızı karıştırmasın, genel kapsayıcının tüm divleri kapsaması için float elemanlarını temizleyen bir sınıf o. Çok sık kullanırım

Adım 3 – jQuery Dosyasını ve Kodlarını Eklemek

<script src="jquery.min.js" type="text/javascript"></script>

scriptimizi dosyamıza ekledik ve okuttuk. Şimdi istediğimizi yapması için bazı yönergeler göndereceğiz;

<script>
$(document).ready(function () {

if($(".Sag").height()>$(".Sol").height()) {
$(".Sol").height($(".Sag").height());
}else{
$(".Sag").height($(".Sol").height());
}

});
</script>

İlk kod bloğumuzda eğer ki Sag isimli divin yüksekliği Sol isimli divden büyük ise Sol’ un yüksekliğini Sag kadar yap dedik daha sonra değilse ifadesi ile tam tersi bir işlem döndürdük. Bu işlem sizi bir çok dertten kurtaracaktır eminim. Çünkü beni kurtardı.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız