Kategori: jQuery

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 »

Akordeon Menü ile Tab Uygulaması Birlikte

Geçende bir projede böyle bir uygulama yapmak durumunda kaldım. Projede kayan menü olacak ve bu kayan menüdeki bağlantılara tıklandığı zaman içerik “kaybolma” efektiyle görünecek.

İnternette böyle bir uygulama göremedim. Ben de madem öyle kendim yazayım dedim. Uygulamada jQuery kütüphanesi kullandım. Javascriptte fazla bir tecrübem yok ama iyi bir sonuç elde edebildim. Bunu da sizinle paylaşmak istedim. Belki sizin projelerinize fikir kaynağı olabilir ya da üzerinde değişiklik yapıp geliştirebilirsiniz.

Devamını oku »

jQuery ile Animasyonlu “Başa Dön” Butonu

Uzun sayfalar için oldukça önemli birşey bu “Başa Dön” bağlantısı. Sayfa uzadıkça sitenin yönlendirme bağlantılarından da uzaklaşılır. Bunları tekrardan kullanabilmek için sayfanın başına gitmek gerekir. Bunda da dikkat edilmesi gereken önemli bir konu var. Bu “Başa Dön!” bağlantısını insanların dikkatini dağıtmayacak bir yere koymalıyız. Yoksa ziyaretçilerin dikkatlerini dağıtıp içerikten uzaklaştırabilir.

Bağlantıya doğrudan “#” vererek de bu çözülebilir aslında. Ama amacımız çoğu zaman sitemizde değişik aksiyonların olması değil mi? Ayrıca diyez vermek bazı tarayıcılarda değişik sorunlara da sebep olabiliyor. Bunun için değişik eklentiler, değişik javascriptler mevcut. Ama kim böyle ufak bir özellik için sunucusuna yüklenmek ister? Ben de internette gezerken böyle basit bir işlem için kısa bir kod buldum: Animated scroll to anchor/id function with jQuery

Devamını oku »