jQuery UI Tabber & the Search for Cross Browser Compatibility

One of the sites that I work on for my wife, One of a Kind Wisconsin is a WordPress site. About a year ago, she got a new template with a javascript tabber on the front page. Nothing fancy, just click the tab to reveal a different article. After we started adding widgets (WordPress widgets, not JS library widgets) and affiliate links the tabber started to slow in loading… it got so slow in fact, that I put a spinner animation in so folks at least knew something was happening.

Well, we all know that most people have little patience when it comes to content loading speed, and this tabber did not degrade gracefully for non-javascript users either – so it was a good excuse to do something different.

Enter the Mootools Accordion. It worked a treat even for those aforementioned javascript-less folks. Even better, I could make the transition bounce! Now I think bounce is pretty sweet – my wife just said, “Oh.” and went back to her work when I showed her just how sweet I thought is was. “Okay, what’s up with her?”, thought I, and went back to tweaking the bounce for just the right feel.

The Mootools accordion did the trick until she had me upgrade her browser from IE 6 to IE 8 last week. I really dragged my feet on this since hers was the only system with IE 6 on it – I don’t want sites that look like crap to 20% of internet users so I really had a hard time letting go. Nobody else runs Windows around here, so I guess I’ll have to get 98 SE up on an old laptop. Unfortunately, running IE 6 on a Linux box doesn’t render pages in quite the same way. Remember… position:relative is your friend!

Well, the accordion didn’t work in IE 8 – not even in “Broken” mode. Just a stack of headers and no content to be seen. But, since IE 8 has minuscule market share at the moment, no big deal, right? Wrong. If it looks bad in the customers browser, it doesn’t matter if only 3 other people on the planet use the same browser, they want it fixed – besides, that market share will be bumping once MS starts pushing IE 8 out in automatic updates. It’s also an excuse for me to play with another JS library – namely jQuery UI. I also wanted to use the hosted Google Ajax Libraries.

Come to find out that the wife didn’t like the accordion at all. She preferred the tabber style of old. Maybe that’s why she wasn’t as excited about the bounce effect as I was. jQuery UI has a nice tabber. The roll your own or canned themes that jQuery offers is a big labor saver as well. You can get a clean and consistent look across all such elements on your site.

I got all of the elements together and started on a nice Monday afternoon project. It all went off without a hitch on the development server – I even got the opacity transition working as such:

    //< ![CDATA[
$(function() {
			fx: { opacity: 'toggle' }

So simple, even a lame hack such as myself can get some slick elements on a site working. I just wish I could puff or implode the tabs (okay maybe not). Once on the live server however, the new tabber didn’t work. All of the articles were there and the anchor links that are the tabs worked fine – even in IE 8 – so at least the content is there even when something is broken.

JavaScripts are known to be a bit picky about who loads what and when when dealing with multiple non-homogeneous scripts on a page so I figured it was a plugin that’s installed on the live box but isn’t on the dev server. Since the live site uses all of the plugins that are installed, I was kind of back to square 1. The solution was quite easy though. In the header file of the WordPress template, this call is made to load the jQuery libs:

< ?php wp_head(); ?>

instead of the more traditional

which is actually what google.load spits out anyway. All I had to do was move the google.load call below the wp_head() function thusly:

< ?php wp_head(); ?>

The jQuery UI Tabs now work in IE 8 , “non-broken” (compliance mode) & “broken” mode, (which is IE 7), Firefox 3x on Windows & Linux, Konqueror, and who knows what else. It even looks good in Links. I haven’t test it in IE 6 yet… guess I better dig out that old laptop!

OOAKWI in the Links Browser

OOAKWI in the Links Browser

One thought on “jQuery UI Tabber & the Search for Cross Browser Compatibility

Leave a Reply