Opera tarayıcısı üzerinde jquery & prototype kütüphanelerinin kullanımı sırasında yükseklik ve genişlik değerlerinin yanlış hesaplanması
August 23, 2010 tarihinde postalandı
Javascript, Opera, Tarayıcılar | Bir yorum bırak altında dosyalandı
Bir projemizde jquery 1.4.2 ve prototype 1.6.2 sürümlerini bir ara kullanmak zorunda kalabiliriz. İki kütüphaneyi bir arada kullandığımızda Opera içinde bir elemanın yükseklik yada genişlik değerini öğrenmeye çalıştığımızda almış olduğumuz değerin yanlış hesaplandığını görüceksiniz. Eğer her iki kütüphanenin daha eski sürümlerini kullanıyorsanz bu problem ile karşılaşmamanız normal.
Problemin çözümü için kütüphane dosyalarında ufak değişiklikler yapmamız gerekiyor. Problemler kütüphane sahiplerine bildirilmiş ve sanırım bir sonraki sürümlerinde çözülmüş olacaktır.
Gelelim bu problemi nasıl çözüceğimize;
Bu problemi iki farklı yöntem kullanarak çözebiliyoruz. Fakat yöntemlerden biri başka problemleride meydana getirebileceğini düşündüğümden en sağlam çözüm olacağını düşündüğüm yöntemden bahsediyor olucam.
Jquery kütüphanemizin developer’lar için hazırlanmış olan versiyonunu indiriyoruz. Daha sonra return (“scrollTo” in elem && elem.document) ? // does it walk and quack like a window? kod bloğunu bularak bu kod bloğunu return (“scrollTo” in elem && elem.document && !elem.parentNode) ? // does it walk and quack like a window? ile değiştiriyoruz. Tabiki developer sürümünün boyutu yüksek olduğundan bu sürümünü sıkıştırarak kullanmak isteyebilirsiniz. Burada yardımınıza Closure Compiler yetişiyor. Yapmanız gereken tek şey http://closure-compiler.appspot.com/home sitesine girmek ve sol taraftaki alana kod bloğunu yapıştırıp Compile düğmesine basmak. Daha sonra sağ taraftaki sonucu kopyalayarak yolumuza devam edebiliriz.
İlgili makaleler
Internet Explorer CSS Dosya Sayısı ve Boyut Limitleri
January 19, 2010 tarihinde postalandı
IE6, IE7, IE8 | 4 Comments altında dosyalandı
Son günlerde üzerinde çalıştığım bir proje üzerinde yaptığım güncellemeler sonrasında Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 sürümleri altında sayfadaki bazı bölümlerin düzgün görüntülenemediğini farkettim. Sorunum sayfa içinde bulunan bazı bölümlerin bağlı bulundukları CSS dosyası üzerindeki stil tanımlamalarını düzgün şekilde algılayamamasından kaynaklanıyordu.
Projenin kaynak dosyaları ile proje geliştirme aşamasında hazırlanan sayfaları karşılaştırdığımda, projenin kaynak dosyaları içinde olmayan fakat geliştirme ortamında farklı ihtiyaçlar için kullanılan CSS dosyaları olduğunu farkettim. 16 CSS dosyası olması gereken proje, geliştirme ortamında sonrasında 36′ya çıkmıştı.
Problemin kaynağının Internet Explorer üzerindeki CSS dosya kısıtlamalarından kaynaklandığını çok geçmeden anladım. Peki nedir bu kısıtlamalar, neler yapabiliriz kısaca bahsetmek istiyorum.
CSS Dosya Limitleri Hakkında Kısa Bilgi
Internet Explorer geliştiren ekip bir sayfa içinde <link /> veya @important url(’sablon.css’) yöntemi kullanarak maksimum 32 harici CSS dosyası eklememize izin verir. Eğer bu sayının üzeririnde CSS dosyasına sahipsek bu dosyaları kesinlikle yüklemeyecektir. Bu limit tüm Internet Exlorer (6,7,8) sürümleri için geçerlidir. Bunun dışında pek bilinmeyen sınırlamalardan biride Internet Explorer içinde yüklenecek CSS dosyasının boyutunun (288 KB) geçemiyeceğidir.
Limitler İçin Çözüm Önerileri
Sayfamızda 36 CSS dosyası var ve hepsinede ihtiyamız olduğunu varsayalım. Peki bu durumda ne yapmamız gerekiyor?
1 – CSS dosyalarını gruplamak
Yeni CSS dosyaları oluşturabilir yada sık kullandığımız birden fazla CSS dosyası içine diğer CSS dosyalarını @import url(stil.css) yöntemi kullanarak gruplayabilirsiniz.
grup1.css
-----------------------------
@import url("1.css");
@import url("2.css");
...........
@import url("16.css");
grup2.css
-----------------------------
@import url("17.css");
@import url("18.css");
...........
@import url("36.css");
2 – CSS dosyalarını birleştirmek
CSS dosyalarını bölümlendirmenin en büyük nedenlerinden biri diğer sayfalarda kullanılmayacak olan stil tanımlamarını dosya içinden ayırarak hem CSS dosya boyutlarını düşürmek, hemde dosya yönetimini kolaylaştırmaktır.
Fakat çok fazla parçaya ayrılan CSS dosyalarının yönetimi bir süreden sonra amacı dışına çıkacak, yönetim zorlaştığı gibi aynı tanımlamara sahip bir çok CSS dosyasına da sahip olacaz. Tarayıcı üzerindeki dosya istek sayısınıda unutmayalım. Ne kadar çok istek sunucu tarafına o kadar yük demektir. Sonuç olarak yapmamız gereken benzer özelliklere sahip CSS dosyalarını birleştirmek ve münkün olduğunca benzer tanımlamaları aynı CSS dosyası üzerinde tutmak olacaktır.
3 – Gereksiz CSS dosyalarını kaldırmak
Malum dosya sayısı arttıkça yönetim zorlaşacağından aynı stil kurallarını içeren birden fazla CSS dosyasına sahip olacaksınız. Bu tarz bir sorun ile karşılaştığınızda elinizdeki dosyalarını tekrar gözden geçirebilir ve artık işinize yaramayan yada fazlalık olan dosyalarıda kaldırabilirsiniz.
Java applet kullanımda karşılaşılan z-index problemi
January 7, 2010 tarihinde postalandı
Uncategorized | Bir yorum bırak altında dosyalandı
Biliyorum uzun zamandır pek birşey yazamıyorum. Ama inanın çok yoğun şekilde çalışıyor ve bloğuma zaman ayıramıyorum. Fakat üstünden zaman geçmeden son zamanlarda çalıştığım bir proje üzerinde karşılaştığım ve çözüm geliştirdiğim bir problemi sizlerle paylaşmak istedim.
Eğer sayfanız içinde bir java applet kullanıyor ve bir şekilde bu applet üzerinde kullanılacak açılır menü (dropdown menu) veya bir html bloğu konumlama ihtiyacı duyuyorsanız blokların java applet’in altında kaldığını görüceksiniz. İlk aklınıza gelen blokların z-index’lerini kontrol ederek çözmeye çalışmak olacaktır. Fakat denediğinizde bunun bir işe yaramadığını görüceksiniz.
Benzer bir problem olarak IE6 içinde render edilen bir sayfada selectbox üzerine bir div vb. bir blok açmaya kalktığınızda selecbox’ın açılan bloğun üzerine taşmasınıda verebiliriz.
Şu anda anlatıcağım yöntem ile yaşanacak olan iki problemide çözebilir kendi metodlarınızıda geliştirebilirsiniz. Ama şunu söyliyim aklın yolu birdir 
İşin püf noktası applet üzerine yerleştireceğimiz boş bir iframe kullanmaktır. Fakat iframe eklendikten sonra applet içinde gösterilen uygulamayı maskelediğinden java applet gözükmeyecektir. Bunun için dropdown gibi menü yapılarında menü açıldığında iframe’i dom ağacına eklemeli, iframe’ın pozisyonu ve boyutunu açılır menünün kapladığı alan ve pozisyonla eşitlemeli, iframe’in z-index’i dropdown menü’den daha küçük olacak şekilde ayarlanmalıdır. Dropdown menüden bir item seçildiğinde iframe dom ağacı üzerinden kaldırılmalıdır. Burada iframe set ederken ie versiyonları için src=”#” diğer modern tarayıcılar için src=”javascript:;” kullanılması doğru olacaktır.
Aşağıda ortaya çıkacak yapının bir örneğini görebilirsiniz.
-
<ul class="dropdown-menu" style="z-index:100; …..">
-
<li>Dropdown Menu</li>
-
<li>Selectbox</li>
-
</ul>
-
<applet …></applet>
-
<iframe frameborder="0" src="#" style="width:…; height:..; position:absolute; top:…; left:…; z-index:99"></iframe>
Çok fazla vaktim olmadığından konuyu kısa kesiyorum fakat ilk fırsatta örnekler ile konuyu daha iyi anlamanız için bir çalışma yapacam ve yazıyı tekrar elden geçirecem. Umarım yararlı bir makale olmuştur.
Wordpress’in query_posts() fonksiyonu ile yapılan yeni sorgu ile ortaya çıkan sayfalama problemi
September 29, 2009 tarihinde postalandı
Wordpress | 2 Comments altında dosyalandı
Ziyaretçi istatisliklerimi incelerken belirli sayfaların ziyaret edildiğini farkettim. Bunun üzerine bloğum içinde gezinmeye başladım ve sayfalama özelliğini kullanmaya kalktığımda doğru çalışmadığını gördüm. Neden olabileceğimi düşünürken en son yaptığım değişiklik olan ana sayfam içinde portfolyo içeriklerini göstermemek için kullandığım query_post() fonksiyonu ile yaptığım yeni sorgulamadan oluşabileceği aklıma geldi.
Biraz araştırma yaptıktan sonra hatanın sebebinin query string üzerinden gönderilen parametrelerin sql sorgusuna dahil edilememesinden kaynaklandığı ortaya çıktı. Sorunun çözümü için query_post() fonksiyonu içinde wordpress içinde tanımlı olan global $query_string; değişkenini eklemek problememi tamamen çözdü. Aşağıda doğru kullanım için gerekli örneği bulabilirsiniz.
Bir önceki kullanım örneğim
-
<?php
-
query_posts("cat=-66");
-
?>
Son hali
-
<?php
-
global $query_string;
-
query_posts($query_string . "&cat=-66");
-
?>
İlgili Sayfalar
Tarayıcılara özel kapsamlı CSS Hack listesi
September 9, 2009 tarihinde postalandı
CSS, Tarayıcılar | 1 Yorum altında dosyalandı
Arayüz kodlayan bir çok kişinin ihtiyacı olacağını düşündüğüm Tarayıcılara özel olarak kullanacabileceğimiz CSS Hack yöntemlerinin bir çoğunu görebileceğiniz listeyi sizlerle paylaşmak istedim. Her ne kadar CSS Hack yapmadan arayüz hazırlamak hayalim olsada umarım bu listedeki Hack yöntemleri hayatınızı kolaylaştırırır.
Seçici Hackleri (Selector Hacks)
IE6 ve alt sürümleri
* html #test { color: red }
IE7
*:first-child+html #test { color: red }
IE7, FF, Saf, Opera
html>body #test { color: red }
IE8, FF, Saf, Opera (IE 6,7 hariç)
html>/**/body #test { color: red }
Opera 9.27 ve alt sürümleri, safari 2
html:first-child #test { color: red }
Safari 2-3
html[xmlns*=""] body:last-child #test { color: red }
safari 3+, chrome 1+, opera9+, ff 3.5+
body:nth-of-type(1) #test { color: red }
safari 3+, chrome 1+, opera9+, ff 3.5+
body:first-of-type #test { color: red }
saf3+, chrome1+
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test { color: red }
}
Safari 2 – 3.1
html[xmlns*=""]:root #test { color: red }
Safari 2 – 3.1, Opera 9.25
*|html[xmlns*=""] #test { color: red }
IE6-8 hariç
:root *> #test { color: red }
IE7
*+html #test { color: red }
Sadece Firefox. 1+
#test, x:-moz-any-link { color: red }
Firefox 3.0+
#test, x:-moz-any-link, x:default { color: red }
Öznitelik Hackleri (Attribute Hacks)
IE6
#test { _color: blue }
IE6, IE7
#test { *color: blue }
IE6 Hariç
#test { color/**/: blue }
IE6, IE7, IE8
#test { color: blue\9; }
IE7, IE8
#test { color/*\**/: blue\9; }
sonraki postalar »
