jQuery .not() Metodu

Hariç anlamına gelir. Mesela bir nesne seçtik ama atıyorum 2. indexli nesne hariç. Ya da atıyorum .active classı olan nesne hariç. Hariçler haricinde bize kalan nesnede işlem yapmamızı sağlıyor.
Mesela seçtiğimiz nesneler içinde active classı yoksa tıklama işlemi yaptıralım;

<ul>
    <li>test</li>
    <li>test2</li>
    <li class="active">test3</li>
    <li>test4</li>
</ul>
$('.menu li').not('.active').on('click', function(e){
    alert('ta da!');
});

Verdiğim örnekte 3. lide click işlemi olmayacaktır çünkü active sınıfına sahip ve benim istediğim olayım ona sahip olmayan nesnelerde çalışıyor not sayesinde.

jQuery .filter() Metodu

jQuery’de bulunan metodlar içinde en sevdiğimdir. Çünkü büyük ölçüde işimi kolaylaştırıyor.
Örneğin bir nesneyi değişkene aktardım.

var tab = $('.tab li');

Şimdi burada ilk elemanı seçip addClass metodunu uygulamam gerektiğinde bunu filter ile belirtiyorum.

tab.filter(':first').addClass('active');

Böylece değişkenin taşıdığı nesnelerde filtreleme işlemi yapıp ilk elemanı seçmemi sağlıyor.
Tabi sadece ilk eleman için değil :not(), :eq(), this vb. bir çok şey için geçerlidir. Örneğin küçük bir tab uygulaması yapacak olsaydık işimiz çok kısa olacaktı;

var tab = $('.tab li'),
content = $('.tab-content');

content.filter(':not(:first)').hide();
tab.filter(':first').addClass('active').end().on('click', function(e){
    tab.removeClass('active').filter(this).addClass('active');
    content.hide().filter(':eq(' + $(this).index() + ')').show();
    e.preventDefault();
});

Ya da örneğin daha farklı bir örnek verelim;

$('.item').filter(function(index){
    return $( this ).hasClass('boxed');
}).addClass('active');

http://api.jquery.com/filter/

İşte böyle, kolay gelsin ????

jQuery .end() Metodu

Sıkça kullandığım bir metoddur kendisi.
Yaptığı iş ise, ilk seçilen elemana geri dönmesi. Yani örnek vermek gerekirse;

$('.item').find('a').addClass('external-url').end().on('click', function(e) {
   alert('test');
});

Burada item içerisinde a nesnelerini bulup sınıf atadık. Eğer end metodunu kullanmamış olsaydık click işlemi a nesneleri için geçerli olacaktı. Ancak end kullandığımız için tekrar başa sardık ve filtreleme işlemlerini önemsemeden eventımızı uyguladık.
http://api.jquery.com/end/

Kolay gelsin.

jQuery Scrollbar Eklentisi

Sizlere perfectScrollbar adında bir jquery scrollbar eklentisini tanıtacağım.. Uzun zamandır kendi projelerimde kullanıyorum, jquery ile özel scrollbar yapmak isteyenler için ideal bir eklenti.

Öncelikle eklentiyi şuradan indirebilirsiniz.. İçerisinde src klasörü altında bize lazım olacaklar bulunuyor.. Bunlar;

  • jquery.mousewheel.js
  • perfect-scrollbar.js
  • perfect-scrollbar.css

Nasıl kullanacağız?

İlk olarak jquery kütüphanesi lazım tabi, bunu söylememe gerek yok ???? Bir html oluşturalım hemen..

<div id="content">
 … içerik …
</div>

Basitte bir css yazalım. CSS’de olması gerekenler overflow: hidden ve position: relative bunları koymayı unutmayın ????

.content {
	width: 500px;
	height: 500px;
	overflow: hidden;
	position: relative;
}

Ve tabi ki eklentiyi kullanmaya geldi sıra..

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="perfect-scrollbar/jquery.mousewheel.js"></script>
 <script src="perfect-scrollbar/perfect-scrollbar.js"></script>
 <link href="perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function(){
      $('#content').perfectScrollbar();
 });
 </script>

İsterseniz parametrelerde kullanabilirsiniz.. Örneğin scroll hızını ayarlayabilirsiniz.. Ya da scroll’un sadece x ya da y ekseninde çıkmasını sağlayabilirsiniz..

$('#content').perfectScrollbar({
	suppressScrollX: true,
	wheelSpeed:100
});

Nesneye yeni içerikler eklendiğinde scroll’u update etmek içinse şu şekilde bir kullanım gerekiyor;

$("#content").scrollTop(0);
$("#content").perfectScrollbar('update');

jQuery cursorWatcher Eklentisi

Bir nesne düşünün.. Ve bu nesneye göre fare nesnenin neresinde kalıyor, bunu öğrenmemiz gerek.. Temelde 9 farklı konumu hesaba katarak küçük bir eklenti hazırladım.. Eklenti nesneye göre farenin 9 farklı konumunu tespit edip bir şeyler yapmanızı sağlıyor.

Nesneye göre konumlar:

  • Yukarı
  • Aşağı
  • Sol
  • Sağ
  • Yukarı Sol
  • Yukarı Sağ
  • Aşağı Sol
  • Aşağı Sağ
  • Orta

İndir (Github)

https://github.com/tayfunerbilen/cursorWatcher

Yazıya Gradient Renk Uygulama (jQuery)

Bazı tasarımlarda yazıların gradient renkleri oluyor. Bunu css’e dökerken ya imaj olarak alıyoruz ya da tek renk ile yapıyoruz. Ancak bir jquery eklentisi sayesinde yazılara kolayca gradient renk verebileceğiz. Benim çok işime yaradı, eminim sizinde işinize yarayacaktır ????

Web adresi: http://www.codefocus.ca/goodies/gradienttext

Nasıl kullanılır?

jQuery kütüphanesini ve eklenti dosyasını sayfaya çağırdıktan sonra elemanı seçip uygualamak kalıyor geriye.. İşte çalışır bir örnek;

$('#text').gradienttext({
	colors: ['#FFF', '#CCC', '#111'],
	style: 'vertical'
});

Dilerseniz style parametresini horizontal yaparak yatay şekilde de gradient verebilirsiniz. Ne kadar renk kodu yazmak isterseniz o kadar belirtebilirsiniz colors parametresinde.

JS ve jQuery’de Girilen Değerleri Büyük/Küçük Yapmak

Anlık olarak kullanıcıdan aldığımız verilerde tamamı büyük ya da tamamı küçük olmasını isteyebiliriz. Bunu bir çok yolla yapabiliriz, ama daha kullanıcı girerken yapıyor olmamız bir avantaj.. Peki nasıl yapacağız?

Örneğin bir inputumuz olsun;

<input type="text" />

Bu input, keyup olduğunda bunu yakalayalım ve mevcut değerleri toUpperCase() ile büyütelim ve yeniden değerini yazdıralım.

$('input').keyup(function(){
    this.value = this.value.toUpperCase();
});

Ya da mesela büyütmek yerine küçültmek istersek bu seferde toLowerCase() işlemini uygulayacağız.

this.value = this.value.toLowerCase();

Hepsi bu kadar, bol kodlu günler.

JavaScript – concat()

Concat() metodu, dizileri birleştirmek için kullanılır.
Birden fazla diziyi tek bir dizi haline getirir yani birleştirir.
Birleştirmek için dizi sınırı yoktur ancak en az 1 dizi diğer bir dizi ile birleştirilebilir.

Örnek kullanımı;

var diller = ["türkçe","ingilizce"];
var meyveler = ["muz","çilek","armut","ayva"];
var hayvanlar = ["at","ayı","arı","aslan"];

var yeniDizi = diller.concat(meyveler, hayvanlar);

alert( yeniDizi );

Örnekte de gördüğünüz gibi birleştirmek için önce birleştirilecek dizi daha sonra birleşecek diziler tanımlanıyor. Birden fazlası için virgül ile ayırma işlemi yapabilirsiniz.

JavaScript: select()

Select() yöntemi, form nesneleri içerisindeki yazıyı seçmek için kullanılır.
Kullanıma göre tıklanınca ya da doğrudan nesne içerisinde ki değerler seçili halde olabilir.

Tıklanınca Yazıyı Seçtirmek

Bunun için onclick=”” niteliğini kullanacağız. İstersek bir fonksiyon çalıştırabiliriz ancak bu basit bir örnek olacağı için doğrudan this.select()dememiz yeterli olacaktır. Burada this o an ki nesneyi temsil etmektedir.

<input type="text" name="test" value="Tayfun Erbilen" onclick="this.select()" />

Doğrudan Yazıyı Seçtirmek

Herhangi bir işlem yapmadan doğrudan yazıyı seçtirmek istersek öncelikle form nesnesini javascript ile seçmeli ve daha sonra select() metodunu uygulamalıyız.
Nesneyi kolayca seçebilmek için bir id atayalım ve daha sonra örneğimizi tamamlayalım.

<script type="text/javascript">
document.getElementById('test').select(); // doğrudan yazıyı seçtik
</script>

<input type="text" id="test" name="yazi" value="Tayfun Erbilen" />

JavaScript ile Görselleri Yüklemeden Önizleme Yapmak

Bir çok yerde denk gelmişsinizdir, bir fotoğraf yüklerken seçtiğiniz anda sayfada önizlemesi gelir. Boyutu her ne olursa olsun, hiç beklemeden bu işlem gerçekleşir. Bunu anlık olarak javascript ile nasıl yapabileceğimi merak ettikten sonra biraz araştırma yaptım ve bulduklarımı test ederek başarıya ulaştım.. Şimdi sizlere de bunu göstermek istiyorum.

İlk olarak buna benzer örnekleri şu sitelerde görebilirsiniz;
– 500px.com
– twitter.com
– plus.google.com

Nasıl Yapılır?

Bunu bir API sayesinde (FileReader) yapıyoruz. Ancak bu javascript api’si her tarayıcıda desteklenmiyor. IE için 10 ve üstü destekliyor örneğin ???? Tahmin etmişsinizdir zaten. Her neyse, ie’den girenleri tespt edip ona göre farklı şeyler yaptırabilirsiniz, bu size kalmış. İşte şuan için tarayıcı desteği şu şekildedir;

İlk olarak yapmamız gereken şey, input change olduğunda bunu yakalamak..

$('input').change(function(e){
   // kodlar..
});

Şimdi ise seçilen fotoğraf objesini tanımlayalım;

var fotograf = e.target.files[0];

evet, objemizde elimizde.. Şimdi FileReader apisini başlatalım.

var reader = new FileReader();

Şimdi ise resmi okuyalım. Bunun için readAsDataURL metodunu kullanacağız. Parametre olarak fotoğraf objesini vereceğiz.

reader.readAsDataURL(fotograf);

Son olarak okuma işlemi başarılı ise onload ile gelen değeri alıp görünmesini istediğimiz bir yere yazdırağız.

reader.onload = function(evt){
	$('#result').attr('src', evt.target.result);
}

İşte hepsi bu kadar ????

Daha fazlası için;
https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Tarayıcıların API desteğini bulmak

Kullanıcının girdiği tarayıcı api’yi desteklemiyor olabilir. Bu durumda bunu tespit etmek ve ona göre işlem yazmak gerekir.. API tespiti için şöyle bir mantık yürütebiliriz.

if (window.File && window.FileReader && window.FileList && window.Blob) {
     // destekliyor
} else {
     // desteklemiyor!
}