Wszystko zaczęło się od aktualizacji do wersji WP 3.0.4. Nagle na jednej z moich stron opartych na WordPressie ze skryptami zaczęły dziać się jakieś dziwne rzeczy. Rozwiązanie problemu okazało się bardziej skomplikowane, niż myślałem – wygląda na to, że w najświeższej wersji WP coś jest nie tak z wbudowanym jQuery.

WordPress to dla mnie stosunkowo nowa sprawa, więc daleki jestem od wyciągania pochopnych wniosków i ferowania kategorycznych wyroków. Niemniej faktem jest, że ze skryptami na jednej z moich stron na WP, którą – tak się złożyło – zaktualizowałem jako pierwszą i jedyną, ze skryptami, z którymi wcześniej nie było problemu, zaczęły dziać się dziwne rzeczy.

Objawy

Przede wszystkim pojawił się problem z wyświetlaniem Fancyboxa, co dość mocno mnie zdziwiło, bo Fancybox to jednak bardzo solidna firma. Tytuł zamiast wyświetlać się na środku okna modalnego tuż pod obrazkiem, przykleił się do lewej krawędzi okna przeglądarki i pozostawał tam niewzruszony. Pojawił się też problem z animacjami i płynnym przechodzeniem pomiędzy zdjęciami.

Dodatkowo mój autorski skrypt animujący pewne elementy na stronie również przestał działać jak należy – było to o tyle ciekawe, że ten sam skrypt na localhoście działał bez zarzutu (jak się wkrótce okaże, wersja na localhoście to WP 3.0.2.

Diagnoza

Z początku myślałem, że to tylko IE. Tak – strona działała bez zarzutu pod FF i Chromem, a problem występował wyłącznie w IE – przynajmniej tak mi się zdawało na początku. Pierwsze próby polegały na dokładnym sprawdzeniu moich skryptów. Wyszedłem z założenia, że mój błąd jest bardziej prawdopodobny, jednak wszystko zadawało się być w porządku. Zacząłem kombinować – ponieważ na stronie działało kilka skryptów jednocześnie, zacząłem je usuwać, sprawdzając różne kombinację i mając nadzieję, że w ten sposób uda mi się ustalić, który z nich powoduje problem. To jednak również nic nie dało. Przeleciałem arkusz stylów (:D), ale tam również nie doszukałem się błędów – wszystko wydawało się być w porządku, a w tym przekonaniu dodatkowo utwierdzał mnie fakt, że problem występował tylko w IE8.

Pomyślałem, żeby oszukać i zastosowałem znany meta tag. Jak ręką odjął – nagle zaczęło działać. Co za ulga. Wprawdzie pojawiły się pewne różnice w wyświetlaniu całej strony, ale generalnie były one do przełknięcia i – co ważniejsze – do zrobienia. Ochoczo zabrałem się więc za naprawę Fancyboxa…

Z początku myślałem, że problemem jest wtyczka. Jako, że nie jestem wordpressowym wiarusem, stosuję wtyczki. To znaczy stosowałem, bo teraz unikam ich jak ognia – nie dlatego, ze są złe, tylko dlatego, że często są niepotrzebne (jak np. wtyczka Fancybox). Skoro to wtyczka – pomyślałem – to usunę ją i zainicjuję Fancyboxa ręcznie. Jak pomyślałem, tak zrobiłem. Chwilę potem Fancybox już śmigał odpalany z zewnętrznego pliczku .js. Niestety – niczego to nie zmieniło.

I wtedy coś mnie pokusiło, żeby odpalić stronę w Operze. Jakież było moje zdziwienie, kiedy okazało się, że Opera ma ten sam problem co IE8. A więc to nie kwestia przeglądarki – coś jest nie tak z kodem. Opera się nie myli. Problemy w IE nikogo nie dziwią, ale problemy w Operze? Zacząłem kombinować – w telegraficznym skrócie problem dotyczył metody width(). Z niewyjaśnionych przyczyn, metoda ta użyta na dowolnym elemencie zwracała jakąś kosmiczną wartość rzędu 1000px. Okazało się, że zwracana jest szerokość nie elementu, a okna przeglądarki. A więc problemem nie był WordPress (no, może po części) ani moje skrypciki, tylko biblioteka jQuery.

Leczenie

Leczenie okazało się szybkie i bezbolesne. Skoro wbudowana biblioteka nie daje rady, to trzeba ją zmienić. Nie wiem dokładnie, na czym polegał problem, ale udało mi się go rozwiązać wyłączając wbudowaną bibliotekę i wczytując ją z googlowskiego CDNa. Jak to zrobić – wszelkie informacje znajdziecie tutaj.

Podobne wpisy: