Kategori: JavaScript

Cufon’la Sağdan Sola Yazmak

Birkaç ay önce bir Facebook uygulamasında hem Cufon kullanıp hem de bunu sağdan sola olacak şekilde yapmak durumunda kaldım. Bunu yaparken Cufon’un RTL desteklemediğini öğrendim. İleriki zamanlarda sağdan sola yazım Cufon tarafından desteklenecekmiş ama fazla vaktim olmadığı için bir javascript çözümü buldum.

Bu kod sayfa yüklenirken yavaşlamaya sebep olabilir. Ara ara da font değişimi sırasında yaşanan geçişler görünebilir. Ama eğer sayfanın büyük bir bölümünde Cufon kullanmıyorsanız sorun olmayacaktır.

Cufon'la Sağdan Sola Yazmak
Devamını oku »

Input Mask

Etiketler(label) formlarda ilgili alanların içeriklerine ne gelmesi gerektirlerini belirten elemanlardır ve bütün formlarda farklı şekillerde kullanılır. Çoğu durumda bu etiketleri inputların sağına, soluna ya da üstüne koymak yeterlidir. Ama bazı durumlarda bunları input alanının üzerine/içine koymak gerekebilir. Bunu jQuery kütüphanesini kullanarak basit bir uygulamayla halledebiliriz.

$('input, textarea').focus(function() {
 value=$(this).val();
 $(this).attr("value","");
});

$('input, textarea').blur(function() {
 if($(this).val()=="") {
  $(this).val(value);
 }
});

Çok basit değil mi? Ama bu çözüm kullanıldığında “form validation“larında bazen sıkıntılara, fazladan uğraşlara neden oluyor. O yüzden input alanının içini boş bırakmak programcıların işlerini daha da kolaylaştırıyor.

Devamını oku »

Güncelleme: Buton Elementini Stillendirmek

Güncelleme: Bu yazı 10 Kasım 2010 tarihinde yazılan Buton Elementini Stillendirmek yazısının güncellemesidir. Opera’da karşılaştığım sorunlar ve fazladan “CSS hack” kullanılması nedeniyle bu güncellemeyi yapma gerekliliği hissettim. Bu yöntemde fazladan bir HTML elementi daha kullanıldı, ama hemen hemen hiç “CSS hack” bulunmuyor.

HTML Yapısı

HTML yapısı biraz değişti. Önceki yöntemde, Opera’da üzerine tıklandığında oluşan kaymanın verdiği etkiyle arkaplan resmi bölünüyordu. Bu yöntemde ise kayma yine oluyor ama arkaplan resmi bölmeden bütün olarak kayıyor.
Devamını oku »

Buton Elementini Stillendirmek

Buton elementini stillendirmek çoğu zaman sıkıntılı olmuştur. Çünkü bu element her tarayıcıda farklı farklı taranıyor. Bunu stillendirmek için birkaç yöntem var, ama her birinin kendi içinde sınırları var. Kullanılabilecek yöntemler şöyle:

  • Arkaplan görseli (background-image) kullanmak: Bu yöntemin sınırlılığı aynı stile sahip olsa da farklı boyutlardaki faklı butonlar için farklı görseller kullanmak gerektirmesidir.
  • CSS3 kullanmak: Border-radius, gradient, box-shadow gibi özellikleri kullanmak. Bu yöntem modern tarayıcılarda gayet de kullanışlıdır. Ama IE gibi hala CSS3 desteklemeyen tarayıcılar için yine de bir alternatif oluşturmayı gerektirir.
  • Buton elementinin içine görsel koymak: Border ve background‘u aynı biçimde stillendirip elementin içine <img> etiketiyle görsel koymak. Bu da bizi sınırlandırır. İstediğimiz görsel zenginliği her zaman elde edemeyiz.

Şimdi göstereceğim yöntem ile hemen hemen her tarayıcıda aynı görüntüyü elde edebilirsiniz.

Devamını oku »