JQuery ile IE7 z-index problem çözümü
Internet explorer'ın bilinen sorunlarından biri olan ve kural tanımayan bir browser olduğunu gösteren z-index problemi çoğu tasarımcı için baş ağrıtıcı sorunlardan biridir.Basit birkaç google aramasıyla birçok farklı kaynaktan sorunu inceleyebilirsiniz.Bu kaynaklardan bazılarını sayfa sonuna ekleyeceğim.
Vance Lucas bu konuyla ilgili olarak güzel bir çözüm bulmuş.Çözüm aslında oldukça basit hazırladığı jquery fonksiyonuyla sayfa içerisindeki katmanlara 1000'den başlamak üzere 10'ar azalarak z-index atıyor.Bu işlem çoğu z-index probleminizi internet explorer 7 için çözecektir.Ancak size özel durumlar için aşağıda listelenmiş bağlantınları incelemenizde yarar var.
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
Hata'nın Anatomisi
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
Z-index nedir?
http://www.fatihhayrioglu.com/z-index/
http://www.muhammetsevim.com/yazi/css-pozisyonlama-ve-z-index/
Jquery load() ve Chrome/Safari
Jquery load() fonksiyonu sayesinde basit ajax sayfa yükleme işlemlerinize olanak sağlar.Ancak bu noktada birçok kişinin sorun yaşadığı çözümünden de pek bahsedilmeyen konulardan biri Webkit tabanlı browserların (en bilinenleri chrome ve safari ) neden olduğu yüklenen sayfa içerisindeki stil ve jquery kodlarının çalışmaması.
Aslında bu durumdan tam olarak sorun olarak bahsetmek pek mümkün değil.Çünkü bu iki browser da W3C standart kurallarına tam uydukları için böyle bir durum meydana gelmekte.Aksine Internet Explorer ve Firefox ise bu basit kuralı iyiki hiçe saydıkları için problemsiz çalışmakta.
W3C standartlarına göre style elementleri sadece head tagları arasında yer alabilir.Yani yüklenen dosyalarınız içerisindeki style elementleri webkit tarafından yok sayılacaktır.Benzer şekilde Javascript kodlarınızda yüklenen sayfa içerisinde yok sayılacaktır.
Bu durumu düzeltmek için stil kodlarınızı yüklediğiniz sayfa içerisine yerleştirmeniz yeterli.Javascript kodlarınız için ise ;
$(document).ready(function(){});
fonksiyonunuz eğer daha önce tanımlanmışsa bu fonksiyonu yüklenen sayfalardan kaldırmanız yeterli.
Jquery Çakışma Problemi
Jquery'nin bilinen en popüler javascript kütüphanelerinden birisi olmasının nedeni sorunlarınıza pratik çözümler üretmesi.İşte bu tip sorunlardan birisi olan çakışmalar can sıkıcı olabilmekte.Ancak jquery'nin buna da ufak ama etkili bir çözümü var.
Çözüme geçmeden önce ilk olarak bu konudaki kişisel deneyimimi oluşturan sorunu paylaşmak istiyorum ; geçen günler içerisinde bir projemde grey box kullanmaya karar verdim.Onca jquery eklentisi varken neden böyle bir script kullandığım tartışılır ancak yine kullanma kararını aldım ve projenin birçok bölümünde kullandım.Sonrasında son görsel değişiklikleri yapmadan önce kullanmak istediğim Jquery efektlerinin çalışmadığını fark ettim.Bu noktadan sonra sorunun çakışma sorunu olduğu birkaç testten sonra aşikardı.
Ufak bir araştırma sonunda Jquery'nin bu gibi çakışma sorunları için ufak ve etkili bir çözüme sahip olduğunu buldum.
Genel olarak çakışmaların nedeni javascript kütüphanerlinin benzer kısayolları tercih etmeleri.Bu yüzden Jquery bizlere seçici kısayolumuzu yani '$' değiştirmemiz sağlayacak kolaylığı sunmuş.Örneğiş $ işaretimizi $x ile şu şekilde değiştirebilmekteyiz.
var $x = jQuery.noConflict();
Bu kodu sayfanız içerisinde herhangi bir scripte eklemeniz yeterli.Ve böyle yeni seçiciniz $x olacaktır.
<script type="text/javascript">
var $x = jQuery.noConflict();
$x(document).ready(function() {
$x('#ekle').click(function(){
$x('#ozellikler').append("<label for='ozellik[]'>Özellik</label> <input type='text' name='ozellik[]' />Değer: <input type='text' name='deger[]' class='deger'/><hr>");
});
});
</script>