screen.availWidth & screen.availHeight

November 17, 2008 tarihinde postalandı
Javascript | Leave a Comment altında dosyalandı

screen.availWidth

Ekranda kullanılabilir yatay alanın genişlik değerini verir.

screen.availHeight

Ekranda kullanılabilir dikey alanın yükseklik değerini verir. Eğer Windows kullanıyorsak kullanılabilir alandan kasıt görev çubuğunun yüksekliği çıkarıldığında ekranda kalan alanın yükseklik değeridir.

Görselliği Zenginleştirilmiş Selectbox (Custom Selectbox)

November 12, 2008 tarihinde postalandı
CSS, Javascript | 2 Comments altında dosyalandı

Web tasarımı ile ilgilenen herkezin bir kerede olsa görsel olarak düzenlemeye çalışmış olduğunu düşündüğüm ve ama her seferinde hüsranla sonuçlanan, tarayıcılar içinde görsel olarak belirli bir standarta oturmamış olan SELECTBOX‘tan bahsediyorum.

Hazırladığım projenin amacı sayfamızda bulunan ama ısrarla görsel olarak mudahaleye cevap vermeyen selectboxları bir javascript dosyası yardımı ile görsel olarak biçimleyebilmek.

Evet yanlış duymadınız. Artık sayfamızda bulunan selectboxlar üzerinden görsel olarak mudahale şansınız olacak. Tabiki bu bir ilk değil. Web dünyasında aşağıda linklerini verdiğim siteler gibi daha bir çok örneğini görebilirsiniz.

Peki Volkan neden bu kastın, zaten alem yapmış neden Amerikayı baştan keşfetmek istiyorsun diyen çıkacaktır aranızda. Belki haklısınız! Belkide;

Biraz BEN yaptım, hazırladım diyerek kendimi iyi hissetmem haricinde Türkiye içinde bu tarzda uygulamaları hazırlayan ve dahada iyilerini hazırlayabilecek bir çok insan tanıyorum. Ama üretmenin yanında hep tüketen, takip eden insanlar olacağımıza birazda üreten ve takip edilen insanlar olmak hoşunuza gitmezmi? Açıkcası benim gidiyor ve fırsatlar oldukça bu tarzda uygulamaları yazmaya devam edicem.

Hazırlamış olduğum kod şu anda tam anlamı ile bitmiş ve optimize değil. İşlerimden kalan zamanlarda kodlamaya devam ediyorum. Yaptığım çalışmaya aşağıdaki linklerden ulaşabilirsiniz.

Kendileri deneme yapmak isteyen arkadaşlar Demo linkine tıklayıp proje ilgili dosyaları indirebilirler.

Sizlerden gelen görüşler doğrultusunda kodları iyileştirmeye ve geliştirmeye devam edicem. Bu proje ile ilgili gelişmeleri Projelerim bölümü altından izleyebilirsiniz.

Google Chrome ve Safari 3.1 için CSS Hack Yöntemi

October 22, 2008 tarihinde postalandı
CSS | Leave a Comment altında dosyalandı

Kullanılan yöntem aslında sadece Google Chrome ve Safari 3.1 tarayıcılarını hedef alan bir yöntem değildir. Fakat şu anda Google Chrome ve Safari 3.1 bilinen tüm seçicilere destek vermesi bu yöntemi sadece bu iki tarayıcı için kullanma imkanı sağlar.

body:nth-of-type(1) p{
color: #333333;
}

Yukarıdaki kuralı sayfamıza eklediğimizde sadece Google Chrome ve Safari 3.1 tarayıcılarında paragrafların renginin gri olduğunu göreceksiniz. Kod tam olarak nasıl çalışır anlatmak istersek:

Tüm bu pseduo’lara ait detaylı bilgiye http://www.w3.org/TR/CSS2/selector.html altından erişebilir ve daha fazla bilgi sahibi olabilirsiniz.

Ajax Türkçe Karakter ve Cache Sorunu

October 17, 2008 tarihinde postalandı
Ajax | Leave a Comment altında dosyalandı

Genel olarak ajax kullanarak yapılan data alış verişlerinde türkçe karakter problemi ile karşılaşırız. Bunun bir çok sebebi var. Nedenleri ve çözümleri hakkında çok yazılıp çizildi biliyorum fakat geçen gün karşılaştığım farklı bir sorundan bahsetmek istiyorum. Sorun ajax ile query string üzerinden gönderilen türkçe karakter.

query adında bir parametremiz ve bu parametrenin Çicek adında bir değeri olsun. Göndericeğimiz sayfanın ismide index.asp. Url olarak tam görünümü index.asp?query=Çiçek şeklinde olacaktır. Ajax üzerinden bu url gönderdiğimde Internet Explorer 6 - Internet Explorer 7 içinde query parametresinin değeri iek olarak görülüyordu. Firefox, Opera, Safari, Google Chrome içinde ise değer düzgün şekilde iletiliyordu. İlk olarak encoding ayarlarından şüphelendim. Database ve gönderdiğim sunucu sayfasının encoding ve karakter setini kontrol ettiğimde olması gerektiği gibi UTF-8 olduğunu gördüm.

Internette biraz araştırdıktan sonra sorunun javascript üzerinden gönderilen verinin encoding ayarları ile ilgili olduğunu anladım. Çözüm için javascript üzerinden gönderilen türkçe karakterlere sahip verinin sunucu sayfasına encoding yapılarak gönderilmesini sağlayan ve javascript içinde hazır bir fonksiyon olarak kullanılan encodeURIComponent() buldum. Göndericeğimiz değeri bu fonksiyon içinde gönderdiğimde problem ortadan kalkmıştı.

Örnek: 

index.asp?query=encodeURIComponent(”Çiçek“)

Bu sorunu çözdükten sonra sayfaları incelemeye başladığımda Internet Explorer 6 - Internet Explorer 7 içinde sayfadaki verilerin cache lediğini farkettim. Yine biraz araştırdıktan sonra bu sorununda genel bir sorun olduğunu ve bunu düzeltmek içinde ufak bir trick kullanıldığını gördüm. Yapılan iş aslında çok basitti. Var olan url ile birlikte query srting üzerinden random bir sayı üretilerek gönderilen başka bir parametre göndermek sorunu çözüyordu. Bu iş kullandığım ve gayet güzel iş gören fonksiyonu aşağıda bulabilirsiniz.

function noCache(uri){
return uri.concat(.test(uri)  &  , noCache=, (new Date).getTime(), ., Math.random()1234567);
}

Ajax içinde göndericeğimiz URL’i bu fonksiyon içinde gönderdiğimizde artık Cache problemide ortadan kalkacaktır.

noCache(index.asp?query=encodeURIComponent("Çiçek"))

olarak gönderdiğimizde çıktı olarak karşımıza

index.asp?query=Çiçek&noCache=Random

Sayı şeklinde bir url verecektir. Kolay gelsin.

Css Hack & Filters Metodları

June 26, 2008 tarihinde postalandı
CSS | Leave a Comment altında dosyalandı

Bir sayfanın arayüzünü hazırlarken mümkün olan tüm tarayıcılar içirisinde (Internet Exlorer, Firefox, Opera, Safari, Mozilla, Konqueror vs.) aynı şekilde çalışması için özen gösteririm. Fakat bunu başarmak her zaman için kolay olmaz. Her ne kadar web dünyasında standartları belirleyen kurum olan W3‘ün önerilere uygun olarak sayfamı kodlamaya çalışsamda XHTML, CSS ve Javascript kodlarımda tarayıcılar arasındaki yorum farklılıkları yüzünden karşılaştığım problemler gelecek saatleri stres içinde geçirmeme neden olur.

Bugün sizlerle CSS tabanlı hazırlanan sayfalardaki farklı browserlar içinde aynı sonucu almamızı sağlayacak ve daha esnek kurallar yazabileceğimiz CSS Hack yöntemlerini anlatan bir siteyi paylaşmak olacak. Favorilerimiz arasında eklenmesi gereken ve daha uzun zaman işimize yaracak bu sayfaya http://centricle.com/ref/css/filters/ adresi altından ulaşabilirsiniz. Siteyi açtığımızda karşımıza gelen tablo içinde en sol tarafta CSS dosyamız içinde belirleyeceğimiz kuralları ve ilerleyen kolonlarda ise farklı işletim sistemleri altında kullanabileğimiz tarayıcılar ve versiyonları altında belirtilen kuralların çalışıp çalışmadığını gösteren bir tabloya ulaşacaksınız. Kurallar üzerindeki linkler şu anda çalışmıyorlar fakat daha fazla bilgi edinmek isteyenler için sitenin altında ilişkili sayfalar üzerinden gidilerek daha fazla bilgiye sahip olunabilir. Bu liste sayesinde dilediğimiz tarayıcı için ona özel ve sadece o tarayıcının yorumlayabildiği kurallar belirleyebilecez ki buda bize sayfamız üzerinde daha fazla yetkiye sahip olmamızı sağlayacak.

Dilerim ileride birbiri ile daha uyumlu çalışan tarayıcılara sahip olur ve bu tarzda hack yöntemleri kullanmadan sayfalarımız rahatlıkla kodlama şansı buluruz.

keep looking »