can çetin blog

15Eki/090

jQuery pngFix ie6

Ekleme: Dünden bu yana bir hata daha farkettim. Aşağıda yükseklik sorununu çözdüğümü söylemiştim fakat gözümden bir şey kaçmış. Eğer 1. tab'da ki içerik diğer tab'lara göre daha uzun ise yükseklik sorunu çözülmüyor. Diğer tablar ilk tabda ki div'in yüksekliğini alıyor. Bunu çözmenin yöntemi;

es.height=el.clientHeight+'px';

bu değeri bulup silmek veya comment'e almak.

Düzeltilmiş versiyonu buradan indirebilirsiniz.

UnitPNGFix - cancetin vers. 992 bytes ( 2 kez yüklendi )

Internet Explorer 6'da bilindiği gibi transparan png'leri, transparan göstermeme sorunu en klasik ie6 hatalarından biridir. Bunu çözmek için bir çok yöntem var fakat çoğu'nun işlevselliğini masaya yatırmak gerekiyor. Bazıları sadece <img> tag'ına etki edip background imajlara etki etmezken bazıları da beraberinde başka sorunlar getirebiliyor.

Yeni yaptığım bir site için düzgün bir png fix ararken unitpngfix adlı jQuery çözümüne rastladım. Hemen sayfama ekledim ve sonuçtan en başlarda çok memnun kaldım.

Fakat sayfa'yı yapmaya devam ederken bazı gariplikler oluşmaya başladı. position:relative içerisinde kullandığım position:absolute elementleri sapıtmaya başladı. CSS'i kontrol edip bir şey bulamamak beni jquery eklentilerini gözden geçirmeye itti. Bu sorun absolute olan png elementlerinde çıktığını anlayınca sevgili unitpngfix'e bir göz atmaya karar verdim.

Sorun unitpngfix'in en son satırında yer alıyordu:
if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}

Burada bulunan static ve relative position'ı veren kodu hiç bir değer vermeyecek şekilde değiştirdim.

if(j!=0){if(elc.position!="")es.position='';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="";}

Bununla birlikte position sorunundan kurtulmuştum fakat hala sorunlar devam ediyordu. En büyük problem display:none olan bir div'in bile background'u png olan div'de yer kaplaması ve background'u uzatmasıydı. Bunun tam çözümünü araştırırken bir siteden modifiye edilmiş unitpngfix dosyasını buldum. Position sorunu devam ediyordu ama height sorunu ortadan kalkmıştı. Üzerinde position ile alakalı değerli modifiye ettikten sonra, tüm işi transparan png'leri ie6'da göstermek olan bir jquery plugin'i ortaya çıktı.

Modifiye edilmiş, tam sorunsuz bir PNG Fix arıyorsanız download linki aşağıda.

UnitPNGFix (sorunsuz)

Kullanımı: pngfix'i kullanmak için ilk olarak en son jquery kütüphanesini header'a eklemeniz gerekiyor. Bu aşamadan sonra aşağıdaki kodu <head></head> arasına -jquery'nin altına- yerleştirmelisiniz.

<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Popularity: 100% [?]

   
54 queries in 0,576 seconds.