jQuery .eq() nedir ? nasıl kullanılır ?

Girilen indeks numaralı nesneyi seçer.
Örneğin: 5 adet nesne içerisinde .eq(-1) yazdığımızda alttan 5. nesne seçilir.

Yani üstten 0,1,2,3,4,5 alttan ise -1,-2,-3,-4,-5 diye nesneler sıralanır.

Html Kodları

  Okumaya devam…

Yeni eklenen resimli içerikler için hareketli resimler

Merhaba öncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yüzden hareketli resimler diye bir isim uydurdum. Eğer bu özelliğin adı varsa afiş gösterici vs yorumda belirtirse sevinirim : )

Geçenlerde arkadaşım umutun bir projesinde arayüz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kaç js özelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kütüphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yüzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size göre.

Uygulamaya giriş :

Uygulamada kullanılan diller : Css & jQuery

İlk işimiz olarak html ve css dosyamızı hazırlıyoruz kodlar; Okumaya devam…

jQuery ile UL içerisindeki LI taglarını ortalamak eq() , Math()

Yatay css menülerde statik yapı artık yetersiz kalınca dinamik yapı olan yani width:; değeri olmayan gerektiği kadar uzayabilen yapıya geçildi bu ilk zamanlar biraz canımı sıksada yazdığım kodların esnekliğini gördükçe çok hoş bir hal almaya başladı. Ama gene bir sorun vardı Lİ taglarını ortalamak boyutu belirli olmayan bir tag margin:0px auto; ile ortalanmıyor tek çözüm margin değeri vermek ama o zamanda Li tagının içeriniğinin ne kadar uzun olacağı belli olmadığı statik margin değeride veremiyoruz bu yüzden gene css ile yollarımız jquery de kesişiyor.

Çözüm bence jquery ile bütün li taglarının boylarını toplatmak , bir üstteki ul tagının width değerinden çıkartmak , çıkan sonucu 2 ye bölüp margin-left ve margin-right değeri olarak vermek.

öncelikle yatay bir css menümüzü oluşturalım.

Css kodları ;

[css] body{background: #4C93B3;}
.kalip{width: 990px; height: 250px; margin:300px auto; }
.kalip ul{width: 990px; background: #fff; height: 50px;}
.kalip ul li { float:left; list-style: none; margin-top: 10px;}
.kalip ul li a{border:1px solid aqua; padding: 5px;background: #333; color:#e2e2e2; text-decoration: none; display:block; font-size: 18px;}
.kalip ul li a:hover{border:1px solid fuchsia;}
[/css]

Html kodları ;

[html] <div class="kalip">
<ul>
<li class="hihi"><a>Atatürk Köşesi</a></li>
<li class="hihi"><a>Ana Sayfa</a></li>
<li class="hihi"><a>Webmaster</a></li>
<li class="hihi"><a>Php</a></li>
<li class="hihi"><a>jQuery Ajax Javascript</a></li>
<li class="hihi"><a>Css</a></li>
<li class="hihi"><a>uzaaaa a a a a a</a></li>
</ul>
</div>
[/html]

Menü görüntüsü ;

Gördüğünüz gibi Li taglarımız yan yana ve ortalanmamış bir şekilde şimdi bu sorundan kurtulmak için jQuery yazmaya başlıyoruz.

Adım 1 : jQuery dosyamızı sayfamıza ekliyorum ediyoruz. Ben google serverlarında olan js dosyasını direk ekliyorum.

Adım 2 : tagları arasına jQuery kodlarımızı yazıyoruz.

jQuery kodları ;

[js] $(document).ready(function(){
var sayi = $(‘.hihi’).size();
var toplam = 0 ;
for(i=0;i<sayi;i++){
var deger = $(‘.hihi’).eq(i).width();
toplam = toplam + deger
}
var kalanDeger = Math.round(((990- toplam)/i)/2);
alert(‘margin-left: ‘ + kalanDeger + ‘ olarak atanacak’);

$(‘.hihi’).css({
‘margin-left’ : kalanDeger,
‘margin-right’ : kalanDeger
});
});
[/js]

jQuery kodlarını adım adım açıklıyorum

[js] $(document).ready(function(){ ….. }); [/js]

Sayfa yüklendiğinde

[js] var sayi = $(‘.hihi’).size(); [/js]

Sayi adında bir değişken oluştur ve class’ı ‘hihi’ olan li taglarının sayısını bul.

[js] var toplam = 0 ;[/js]

Toplam adında bir değişken oluşturduk ve 0 değerini atadık.

[js]for(i=0;i<sayi;i++){ }[/js]

Kaç tane li tagı varsa for döngüsüne bunu belirttik.

[js] var deger = $(‘.hihi’).eq(i).width();[/js]

Deger diye bir değişken oluşturduk ve içinede döngüde tekrarlanan li taglarının boylarını attık burada eq(i) i değeri kaçsa o li’ye ait olan özellikleri almamızda yardımcı oluyor. (eq() ayrıntılı bilgi)

[js] toplam = toplam + deger [/js]

Burada oluşturduğumuz toplam değerine döngü sırasına göre li taglarının boylarınını tek tek toplayıp atıyoruz.

[js] var kalanDeger = Math.round(((990- toplam)/i)/2);[/js]

Burada li taglarını kapsayan ul ‘un boyutundan topladığımız toplam değerini çıkartıp math.round fonskiyonu ile küsürlü çıkabilecek olan sayıyı yuvarlıyoruz ve 2 ye bölüyoruz.(math() ayrıntılı bilgi)

[js] alert(‘margin-left: ve margin-right: ‘ + kalanDeger + ‘ olarak atanacak’);[/js]

Burada ise margin-left ‘e ve margin-right’a atanacak değeri görmemiz için alert verdirdim. Sitenize dökerken bu alert satırını silin.

[js]$(‘.hihi’).css({
‘margin-left’ : kalanDeger,
‘margin-right : kalan Deger
});
[/js]

Burada ise son nokta olan elde ettiğimiz sayıyı .css fonksiyonu ile css’e atıyoruz.

Menümüzün ortalandıktan sonraki hali ;

Takıldığınız yerleri yorum yolu ile sorabiliriz.