22. Gün – jQuery Dersi 22

Yirmi İkinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery scroll Metodu
– jQuery scrollTop Metodu
– jQuery scrollLeft Metodu

Scroll Metodu Kullanımı;

$(window).scroll(function(){
	$("body").append("Scroll Hareket Etti!");
});

scrollTop Metodu Kullanımı;

var i = 0;
$("button#asagi").click(function(){
	$(window).scrollTop(i += 50)
;})

scrollLeft Metodu Kullanımı;

var i = 0;
$("button#saga").click(function(){
	$(window).scrollLeft(i += 50);
})

Kaynak Dosyaları İndirin;
http://yadi.sk/d/0fKfC4G30UbPL

Htaccess ile WWW Kaldırma / Ekleme

Merhaba arkadaşlar, benim her zaman problem yaşadığım bir konudur bu.. Her projemde de bunu uygularım.. Örneğin site adresini www ile belirlemişimdir.. Ancak www olmadan girince de site açıldığı için, ajax dosyamın yolu www ile belirlendiği için ajax’lar çalışmaz.. Bazı sunucularda www ile giriş yapıp, www’süz siteyi açtığında sanki giriş yapmamış gibi gözükür vs.. Bu tür sorunların önüne geçmek için ya www ile girmesini sağlayacağız kullanıcının ya da hiç www kullanmadan girmesini.. Nasıl yaparız?

Eğer anadizinde bir htaccess dosyanız varsa onu açın ya da bir tane oluşturun ve şunları ekleyin;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^siteadi\.com [NC]
RewriteRule ^(.*)$ http://www.siteadi.com/$1 [L,R=301]

Yukarıdaki örnekte, nasıl girerse girsin her zaman www olarak yönlenecek.. Örn: ogretiyor.com olarak girin sizi www.ogretiyor.com’a yönlendirdiğini görebilirsiniz..

Bunun tam tersini nasıl yaparız? Yani www ile girse bile www ekini kaldıracak.. O zaman kodu şöyle değiştiririz;

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.siteadi\.com [NC]
RewriteRule ^(.*)$ http://siteadi.com/$1 [L,R=301]

Evet artık böyle bir problemimiz kalmadı, kolay gelsin 🙂

21. Gün – jQuery Dersi 21

Yirmi birinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery $.browser Nesnesi
– jQuery $.contains Fonksiyonu
– jQuery Resize Metodu

$.browser Nesnesi (jQuery 1.9 sürümü ile bu metod kalkmıştır.)
Bu nesne tarayıcı tipini ve versiyonunu elde etmemizi sağlar. Mevcut tarayıcı tipleri şunlardır;– opera
– msie
– safari
– mozilla
– webkit

Örnek bir kullanımı ise şöyledir;

if ($.browser.opera) {
	alert("Opera tarayıcısı ile giriş yaptınız..");
}

Versiyon öğrenmek için ise örnek kullanım;

alert($.browser.version);

$.contains Fonksiyonu
Bu fonksiyon 2 parametre alır.. Bu paremetrelerde html nesneleri olmalıdır.. İlk nesne içerisinde, 2. nesnenin olup olmadığının kontrolünü yapar.. Örnek bir kullanım;

var sonuc = $.contains($("div#tarayici")[0], $("strong")[0]);
if (sonuc) alert("Nesne bulunuyor!");
else alert("Nesne bulunamadı!");

Burada html nesnesine çevrilmesi için [0] ifadesini seçtiğimiz nesnenin sonuna ekliyoruz.

.resize() Metodu
Bu metod seçilen nesne yeniden boyutlandırıldığında bunu yakalayıp işlem yapmamızı sağlar.. Genelde pencere için kullanılan bir metoddur.. Örnek kullanımı;

$(window).resize(function() {
	var width = $(this).width();
	var height = $(this).height();
	$("#sonuc").html("<strong>Width: </strong>" + width + "<br /><strong>Height: </strong>" + height);
});

Mevcut penceremiz yeniden boyutlandırıldığında yeni genişlik ve yüksekliğini sonuc divinin içerisinde yazdırmış olduk.

Kaynak dosyayı indirin;
http://yadi.sk/d/-FJIc5jr0HfHZ

20. Gün – jQuery Dersi 20

Yirminci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Stop Metodu
– jQuery :contains Filtresi
– jQuery $.isNumeric Fonksiyonu

jQuery Stop Metodu Kullanımı

$("div.ac").click(function(){
   $("div.kutu").stop().slideToggle();
});

jQuery :contains Filtresi Kullanımı

$("ul.filtre li:contains('erbilen')").css("color","green");

contains filtresi, büyük küçük harfe duyarsız olduğu için pek kullanışlı sayılmaz.. Ancak bunun çözümü basit bir fonksiyon ile hallediliyor, aşağıdaki örnek büyük küçük harfe duyarsız şekilde kullanılabilinir bir filtredir.

$.expr[':'].icontains = function(obj, index, meta, stack){
	return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

$("ul.filtre li:icontains('erbilen')").css("color","green");

jQuery $.isNumeric Fonksiyonu Kullanımı

$("#btn").click(function(){
   var $sayi = $("input[name=sayi]").val();
   if ($.isNumeric($sayi)) {
      alert("Girdiğiniz Sayı: " + $sayi);
   } else {
      alert("Bir sayı girmediniz!");
   }
   return false;
});

Ders Kaynak Dosyasını İndirin;
http://yadi.sk/d/LY7dErYJ0D-T2

19. Gün – jQuery Dersi 19

On dokuzuncu jQuery dersimizda aşağıdakileri öğrendik;
– jQuery $.ajax Metodu
– jQuery ajaxStart, ajaxStop, ajaxComplete, ajaxSuccess, ajaxSetup Metodları
– jQuery Ajax Üye Ekleme Uygulaması

$.ajax Metodu Kullanımı;

$.ajax({
	// parametreler gelecek..
});

Girebileceğimiz belli başlı parametreler;
– url = Ajax dosyasının yolu
– type = Gönderim timi (post – get)
– data = Gönderilecek veriler
– dataType = Gelen içeriğin tipi
– success = Ajax isteği başarıyla tamamlanınca çalışır ve verileri alırız.
– error = Bir hata oluştuğunca bu parametre ile yakalayıp işlem yaparız.
– statusCode = Hata kodlarına göre işlem yapmamızı sağlar.
Daha fazlası için: http://api.jquery.com/jQuery.ajax/

Yardımcı Ajax Metodları;
– ajaxSetup() = Değişmeyecek ajax parametrelerini bu yardımcı metodda tanımladığımız taktirde, her ajax isteği için aynı şeyleri yazmamış oluruz..

$.ajaxSetup({
	type: "post",
	url: "ajax.php",
	dataType: "json"
});

– ajaxStart() = Ajax isteği başladığında çalışan metoddur.
– ajaxStop() = Ajax isteği bittiğinde çalışan metoddur.
– ajaxComplete() = Ajax isteği başarılı/başarısız tamamlandığında çalışan metoddur.
– ajaxSuccess() = Ajax isteği başarıyla tamamlandığında çalışan metoddur.
– ajaxError() = Ajax isteğinde hata olduğunda çalışan metoddur.

$("#loader").ajaxStart(function(){
	$(this).fadeIn(); // ajax isteği başlayınca göster
}).ajaxComplete(function(){
	$(this).fadeOut(); // ajax isteği bitince gizle
});

İlk Ajax Örneğini İndirin;
http://yadi.sk/d/Tv2R6rHa05P6Y

Ajax Üye Ekleme Örneğini İndirin;
http://yadi.sk/d/Kns-mNee05PBC

Notepad++ Teması (xHTML/CSS)

Merhaba arkadaşlar, kod yazan çoğu kişi notepad++ programını bilir, muhtemelen sıkça da kullanır.. Bende sürekli olarak notepad++ programını kullanan biri olarak, hem farklı olacağını düşündüğüm için hemde o kadar emeği geçtiği için notepad++ temasını css’e aktardım 🙂 Şuan prototürk’de bu temayı kullanıyorum..

CSS halini sizlerle de paylaşıyorum.. İstek olursa DLE halini tamamen bitirdiğimde paylaşabilirim..

Ekran Görüntüleri;

Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)
Notepad++ Teması (xHTML/CSS)

Konu yanındaki – butonlarından kapanabiliyor.. Son yorumlarda draggable olduğu için, istediğiniz yere tutup sürükleyebiliyorsunuz.. Şimdilik bu kadar 🙂 Üst butonları süs olsun diye koydum, belki geliştirip v2 ile birlikte daha güzel bir şeyler yapabiliriz..

İndirin; (Github)
https://github.com/tayfunerbilen/notepad_plus_plus
(İndirmek için ZIP kısmına tıklamanız yeterlidir.)WordPress Entegresini yapacak duyarlı insanlar aranıyor 🙂 Eğer entegre yapan olursa, konu altında yorum olarak belirtirlerse konuda dahil edebiliriz, teşekkürler.