Volkan Altınbaş'ın Seyir Defteri – CSS, XHTML, Javascript, Wordpress

Jquery ve Prototype javascript kütüphaneleri birlikte kullanmak için dikkat edilmesi gereken kurallar.

August 27, 2009 tarihinde postalandı
Javascript, Uncategorized | Bir yorum bırak altında dosyalandı

Günümüzdeki web projelerinde çoğu zaman birden fazla javascript kütüphanesi ile çalışmak zorunda kalabiliyoruz. Javascript kütüphanelerinden günümüzde en çok kullanılan ise Jquery ve Prototype. Bu yetenekli ikiliyi beraber kullanmak istediğimizde birşeylerin düzgün gitmediğini göreceksiniz. Sorunun kaynağı sayfa içindeki nesnelere erişmek için kullandıkları ortak $() fonksiyonundan kaynaklanmaktadır.

Sorunun çözümü ise basit. Jquery kütüphanesini Prototype kütüphanesinden önce yüklemek ve daha sonra Jquery içindeki objelere erişmek için kullandığınız $() yöntemi yerine jQuery() yöntemi kullanmak sorununuzu tamamen çözecektir. Eğer jQuery ile yazılmış ekstra pluginler kullanıyorsanız bu script dosyaları içinde bulunan $() fonksiyonunu jQuery() ile değiştemeniz gerektiğinide unutmayın. Bu işlem ilk başlarda kafanızı karıştırsada ilerde başınızı ağrıtabilecek bir çok script hatasındanda kurtaracaktır. Önerdiğim yöntem sorunun çözümü için kullanabileceğiniz en sağlam yöntemdir.

İkinci bir alternatif olan Jquery tarafından sunulan jQuery.noConflict() fonksiyonu ise çoğu zaman işe yaramamaktadır ve yukarıdaki şekilde yapılandırmanızı ayarlarsanız bu fonksiyona kesinlikle ihtiyacınızda olmayacaktır.

Bookmark and Share

Dev – Mustafa Murat Boyacı

May 29, 2009 tarihinde postalandı
Mustafa Murat Boyacı | Bir yorum bırak altında dosyalandı

Bundan sonra fırsat buldukça çok sevdiğim logomu tasarlayan ve tasarım konusundaki bilgisini paylaşmaktan hiç kaçınmayan sevgili arkadaşım Mustafa Murat Boyacı’nın çalışmalarınada sitemde yer vermeye çalışacam. Masaüstünüzde çok şık duracağını düşündüğüm son çalışması olan Dev’i sizlerle paylaşmak istedim. Güle güle kullanın ;)

Dev - Mustafa Murat Boyacı

Bookmark and Share

IE8 Hakkında Bilmeniz Gerekenler

April 2, 2009 tarihinde postalandı
CSS, HTML, IE8, Javascript, Tarayıcılar | Bir yorum bırak altında dosyalandı

IE8 uyumluluk modu / IE8 tarayıcısının IE7 gibi render etmesini önlemek

IE8 içinde bir düğmeye basarak sayfamızı IE7 içinde çalışır gibi davranmasını sağlayabiliyoruz. Bu düğmeye tıklandığında sayfamız bundan sonra IE7 gibi davranmaya başlayacaktır. Peki, IE7 modunda sayfamızın IE8 gibi davranma şansı varmı? Maalesef bunu yapmak mümkün değil. Eğer sayfalarımızı IE8 içinde çalışacak şekilde tasarlamış ve kesinlikle bu modda çalışmasını sağlamak istiyorsak sayfamızın içine aşağıdaki parametreyi eklemek yeterli olacaktır.

  1. <meta http-equiv="X-UA-Compatible" content="IE=8" />

Alternatif olarak, eğer tarayıcımızın IE7 gibi davranmasını istiyorsak aşağıdaki kodu eklememiz yeterli olacaktır.

  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />

Her ne kadar bu etiketleri ekleyerek IE8′in IE7 gibi davranmasını sağlasakta bu gerçek bir IE7 gibi olmayacaktır. Bu nedenden meta etiketlerinin kullanımını önermiyorum.

IE8 CSS Hack

IE8 için kullanacağım hack yöntemi star hack yöntemini kullarak IE7 ve daha düşük versiyonları hedef alır. Fakat eski IE tarayıcıları için daha farklı hack yöntemleride kullanılabilir.

  1. p.myclass {
  2. color: green;
  3. *color: red;
  4. }
  5.  
  6. body:last-child p.myclass {
  7. color: blue;
  8. }

Bu hack yöntemi kullanıldığında myclass sınıfına sahip paragraflar;

Bookmark and Share

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.

Bookmark and Share

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

October 22, 2008 tarihinde postalandı
CSS | 1 Yorum 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{
  1. color: #333333;
  2. }

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.

Bookmark and Share

« önceki postalar — sonraki postalar »
Themeforest.Net

Flickr