IE6 içinde yaşanan iframe horizontal scrollbar problemi

Günümüzde ajax kullanımı ile birlikte iframe kullanımı azımsanmayacak şekilde azaltılmış olsada, bazı durumlarda iframe kullanmamız gerekiyor.

Iframe varsayılan olarak atamış olduğumuz yükseklik ve genişlik değerinden daha yüksek yada geniş bir içerik ile karşılaştığında scroll çıkartarak bize içeriği gezme imkanı sunar. Fakat IE6 burada bize yine bir oyun oynuyor ve içeriğin yüksekliği iframe için atamış olduğumuz yüksekliği aştığı anda iframe’in genişliği iframe için atamış olduğumuz içerikten daha düşük olduğu halde yatayda scroll çıkartıyor. Karışık bir tanımlama oldu ama umarım hatanın ne olduğunu anlatabilmişimdir.

Çözüm ise basit. Iframe içinde açılacak olan sayfamızın <head> tagları içinde aşağıdaki style tanımlamasını eklememiz sorunun çözülmesi için yeterli olacaktır.

<!--[if IE 6]>
<style type="text/css">
  html {overflow-x:hidden}
  body {overflow-x:hidden}
</style>
<![endif]-->

Yukarıdaki style tanımını incelerseniz başında ve sonunda benzer bir tanım olduğunu görüceksiniz. Bu tanımlamayı kullanmamın nedeni eklemiş olduğum kuralın sadece IE6 için işletildiğine emin olmak ve bu hataya rastlanmayan diğer tarayıcıları etkilememesini sağlamaktır.

Java applet kullanımda karşılaşılan z-index problemi

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.

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

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.