Jquery son sürümü 1.6 çıktı. Dokümanları incelerken gözüme holdReady() fonksiyonu takıldı.

Jquery holdReady fonksiyonu document.ready olayını tutar veya devam etmesini sağlar. Boolean(true / false) tipi değer döndürür. true değeri dönerse document.redy olayını tutar, false değeri gelirse bırakır ve document.ready olayı gerçekleşir.

document.ready olayı DOM yüklenir yüklenmez devreye girer. Ancak bazen öyle durumlar olur ki DOM’un yüklenmesini beklemeden yüklememiz gereken javascript dosyaları veya referans aldığımız eklenti dosyaları olur, bu gibi durumlarda araya girip bu dosyaları yükletmemiz gerekir ve sonra işleyişi devam ettirmemiz gerekir. İşte bu gibi durumlarda holdReady fonksiyonu kullanılabilir.

$.holdReady(true); // biraz bekle
$.getScript("myplugin.js", function() { // dosyayi yukledik
     $.holdReady(false); // simdi sen isine donebilirsin
});

Bu metot <head> içinde document.ready olayından önce çağrılmalıdır. Eğer sonrasında çağrılırsa işlevsiz kalır. En iyi kullanım yeri jquery kütüphanesi eklendikten sonrasıdır.

Küçük bir örnek yapalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script>
$.holdReady(true); // durdur
$.getScript("deneme.js", function() { // yukle
	$("p").css("background-color", "#f00");
     $.holdReady(false); // devam et
});

$(document).ready(function(e) {
    $("p").css("background-color", "#9C6");
	alert("iki");
});
</script>
</head>

<body>
<p>Deneme.</p>
</body>
</html>

Eklediğimiz deneme.js

// ilk yüklenecek dosya
$("p").css("background-color", "#ff0");
alert("bir");

Örneği görmek için tıklayınız.

Sayfa yükleme sırası;

1- DOM yani yukarıdaki sayfa <p>Deneme.</p> ve deneme.js dosyası birlikte yorumlanacak. (bir)

2- Sonrasında yükleme sonrası işlemler yapılacak. (iki)

3- $.holdReady(false); sonrasında document.ready içerisindeki kod yorumlanacak. (üç)

Son olarak bir not: birden fazla holdReady kullanımı halinde document.ready olayı tüm holdReady fonksiyonlarının bırakılmasını bekler.

Kaynaklar

:target seçicisi CSS3 ile birlikte gelen yeni seçilerden biri. :target seçicisi doküman içi linklere odaklanmamızı sağlıyor. Daha önce bu işi yapmak için javascript ile yapıyorduk. CSS3’ün bizlere kazandırdığı birçok yenilikte olduğu gibi bu özellikte basit bir şekilde sayfalarımıza güzel etkiler kazandırır. :target sözde sınıfı :hover seçicisi gibi dinamik bir seçicidir.

h3:target {
	background-color: #ff0
}

Tarayıcı Desteği

Chrome explorer Firefox
2.0+ 9+ 1.0+

Mobil Tarayıcılar

Android Mobil Safari Chrome
2.1+ 3.2+ 36+

Sayfa içi bağlantıları nasıl yaptığımı hatırlayalım.

Benzer yapının yatay kaydırma çubuğu ile olanını yapabiliriz

Sayfa içi linklerden farklı olarak name ile değil id ile tanımlanan alanları hedef seçiyoruz. Buda bizi fazla kod yazmaktan kurtarıyor.

Aşağıda bu özellik kullanılarak yapılmış bir iki güzel örneğe link verdim.

Örnek1: Dipnot

Bu özellik wikipedia tarafında dipnoların takibi için çok güzel bir şekilde kullanılmaktadır.http://tr.wikipedia.org/wiki/Trabzon_%28il%29 mesela Trabzon ili hakkında bilgiyi okurken herhangi bir dipnot linkine tıkladığımızda ilgili dipnot ardalan rengi değiştirilerek belirginleştirilmiştir.

ol.references > li:target {
	background-color:#def;
}

Bunun dışında eğlenceli örnekler geliştirilmiştir.

Örnek 2: Basit Akordiyon

http://kaioa.com/b/0903/target_faq_demo.html

#faq > li:target > div{
	display:block;
}

örnekte gizle-göster ile basit bir akordeon içerik yapısı oluşturulabilir.

Örnek3: Galeri

http://kaioa.com/b/0903/target_gallery_demo.html#i1

dt:target+dd{
    display:block;
}
    dt:target img{
    cursor:default;
    border-bottom:5px solid #000;
    border-top:5px solid #000;
    margin-top:401px;
}

Örneğinde ise basit bir galeri yapısı kurulabilir.

Zamanla çok daha güzel örneklerin çıkacağını düşünüyorum.

Kaynaklar

http://kaioa.com/node/93 [http://reference.sitepoint.com/css/pseudoclass-target]: http://reference.sitepoint.com/css/pseudoclass-target

Geçen sene 49 adet makale yayınlamışım. Amacım daha çok paylaşımda bulunmaktı. Ama maalesef her zaman aynı heveste olamıyor insan. Her sene daha fazla paylaşım yapmak istesem de ancak bu kadar oluyor.

Önümüzdeki sene daha çok HTML5, CSS3, Javascript, Jquery ve mobil platform üzerine paylaşım yapmayı planlıyorum. Zaman bu konuda ne kadar başarılı olduğumuzu gösterecek.

Geçen seneki istatistikler;

  • 49 adet makale
  • 306.423 ziyaretçi sayısı
  • 761.738 sayfa görüntüleme

Toplam 6.253 yorum var sitede. 77.402 çöp yorum engellenmiş.