Jquery tab menüde Internet Explorer sorunu ve çözümü

3 Eyl 2010 tarihinde eklendi. Blog | 4 yorum

Jquery’de hazırlanan eklentilerin tamamı maalesef Internet Explorer‘da kararlı çalışmayabiliyor. Bununla birlikte, profesyonel ve kurumsal web sitesi isteyen müşterilerimiz de bütün majör tarayıcılarda sitenin sorunsuz çalışmasını isterler. Internet Explorer’da alışık olduğumuz CSS hatalarını düzeltmek, artık işinin ehli web tasarımcılar için çocuk oyuncağı haline gelse de Jquery ile ilgili aynı şeyi söyleyemem. Çünkü her tarayıcıda sorunsuz çalışacak şekilde Javascript düzenlemesi yapmak, biz web tasarımcılar için daha zahmetli ve ekstra zaman kaybettiren bir çalışma.

jQuery ile oluşturulan hazır tab menü kullandığım sitede, Internet Explorer’un bu scripti daha yavaş yorumlamasından dolayı küçük bir sorun oluştuğunu farkettim, bu sabah. Küçük de olsa kurumsal bir site için hiç de hoş durmayacak bir sorundu. Ben de scripti değiştirip bütün tab menü çalışmasına en baştan başlamak istemememden dolayı, soruna bir çözüm bulmaya karar verdim ve buldum:) Ayrıca bulduğum çözümü sizin de uygulamanız için hiç bir şekilde jQuery bilmenize gerek yok.

Buradan indirdiğim jQuery tab menü eklentisini, yukarıdaki resimde bulunan soldaki menüye benzer bir şekilde kullanmak üzere görsel (CSS) düzenlemesini yaparak siteye ekledim. Herşey başlangıçta sorunsuz görünüyordu. Ancak başka bir sayfadan bu tab menüde bulunan her hangi bir tab’a direkt link verince, Internet Explorer’ın bütün versiyonlarında (IE 8 de dahil) rahatsız eden anlık bir görüntü oluştuğunu farkettim. Neyseki sorunun neden kaynaklandığını kısa sürede farkettim ve hatayı çok zaman kaybetmeden düzeltebildim.

Neyse çok uzattım…Şimdi gelelim, kullandığım jQuery tab menünün Internet Explorer’daki sorununa ve nasıl çözüleceğine.  Ama öncelikle, yaşadığım sorunu sizin de daha iyi anlamanız için kullandığım Jquery eklentisine aşağıdaki resme veya bir üst paragrafta verdiğim linke tıklayarak göz atmanızda fayda var.

Jquery Tab menüdeki Internet Explorer sorunu: hide metodu

Tab menü için yazılan scripte göre, sayfa ilk yüklendiğinde tamamı açık gelen tab içerikleri, hide metodu ile gizleniyor ve daha sonra ilk taba (veya dışarıdan link verdiğim taba) class ataması yapılarak sadece o tabın içeriği görünür hale getiriliyor. Script aynen bu şekilde çalışıyor. Aşağıda da nasıl yazıldığını görebilirsiniz. Internet Explorer’da tab’lardan birine dışardan verdiğim linke tıkladığımda açılan sayfada, 1 saniyenin yarısı kadar kısa bir süreliğine de olsa bütün tablar açık geliyor ve tarayıcı ancak scriptteki hide metodunu okuduğunda gizlenmesi gereken tab’lar gizlendikten sonra sayfa düzgün görünümüne kavuşuyordu. Çok kısa bir süre için de olsa, sayfada rahatsız edici bir hareket gözleniyordu. Bunun sebebi, dediğim gibi Internet Explorer’ın bu scripti diğer tarayıcılara göre daha yavaş yorumlaması.

Tab menü scripti

Çözüm

Bu sorunu çözmenin en kolay yolu; sayfa yüklenirken tabların hide metodu ile değil de, CSS yardımıyla gizli gelmesini sağlamak. Eklentiyi bu şekilde düzenlemek için yapmanız gereken şey script’teki ilk satırı yani $(“.tab_content”).hide(); satırını silmek ve CSS dosyasındaki .tab_content class’ına display:none özelliğini eklemek. Böylelikle, bütün tab’lar başlangıçta gizleneceği için, Internet Explorer tab’ları gizlemek için scriptin yüklenmesini beklemeyecektir. Bununla bitmiyor tabii. Aktif olan tabın görünmesini sağlamak için .active class’ına da display:block özelliğini eklemek gerekiyor.

Bu şekilde basit bir düzenleme ile Jquery tab menüyü Internet Explorer’da da sorunsuz çalışır hale getirebilirsiniz. Eğer siz de bu eklentiyi kullandıysanız ve aynı sorunla karşılaştıysanız sorunu bu şekilde çözebilesiniz diye bu yazıyı hazırlamak istedim. Umarım işinize yarar.

Benzer Yazılar: