Tuesday, January 27, 2009

TroubleShooting The JQuery Accordion

JQuery and the Accordion

I've been getting more and more into JQuery recently. It's light, free (as in freedom), and has a vibrant community. Sweetening the deal is the ever growing list of animated controls that effortlessly plug into the framework.

We've been using JQuery for quite a few of our clients who have expressed a desire for more interactive SharePoint sites. I've been so impressed with the framework of late that I've started to advocate it over heavier tools that try to achieve similar results.

The Problem

Just today I ran into a pretty interesting problem with the JQuery Accordion. I'm throwing up this fix because I couldn't find a solution on the web. We had the accordion binding off of a SiteMapDataSource in a SharePoint master page, everything looked great in Chrome, FireFox, and Safari...but IE 6 and 7 were giving us a really hard time.

What made this even more frustrating is that it worked fine in at least three other SharePoint sites with exceedingly similar master pages.

The accordion would flicker at the end of the animation every time the user would expand or collapse a sub menu. We tried removing all the CSS, but the page still yielded the same behavior. The menu would briefly flash the entire contents of a sub menu whenever a a new section was collapsed/expanded. The only way we could stop this was by turning the animation off in entire.

The Troubleshoot

At first I tried debugging the JavaScript for JQuery and the accordion, but the source quickly became difficult to follow. The guys who wrote this stuff have mad JavaScript skills, they're head over heels better JavaScript developers than I am.

So I ended up doing what I normally do when I don't understand what's going on. I started to make things simpler. I opened up SharePoint Designer and started removing sizeable sections of the page, block by block, seeing if I could get the problem to go away. I ended up with a ridiculously small html document that basically had the the accordion menu markup and a couple of other html tags.

It was only when the document was about forty lines long that the problem became apparent.

There was no doc type on the html document. I've written about Quirks Mode before, so I was a little embarrassed that I hadn't noticed it earlier. If you're not familiar, or are too lazy to click on the link above, in a nutshell quirks mode is a special rending mode that browsers go to when you either don't specify the doc type or use html that deviates from the declared doc type. The rules for what justifies quirks mode rendering changes from browser to browser. For IE, not declaring a doc type will cause it to render the page in quirks mode.

Quirks mode changes the way that the browser handles CSS rules. When we failed to declare a doc type, IE started rendering the menu in quirks mode. This changed the way that the browser handled the in line CSS that the JQuery accordion was tacking onto menu list markup. Hence the odd behavior.

I added my favorite and most relaxed doc type:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Low and behold, the animation issue went away. Quirks mode strikes again. I guess the lesson here is that before you get to involved in a markup troubleshoot, ensure the document isn't being rendered in quirks mode! You can figure out how to detect quirks mode by reading this.

Fool Me Twice,


Anonymous said...

Good Article, Tyler. I always find your piece's interesting and a good read, even when not directly relevent to what I'm working with. Looking forward to your next one. Keep it up!

John said...

THANK YOU!!!!! I was going out of my mind trying to figure out what this was! Great article!

Jay said...

Hey Tyler,

Great artical and I think it is the cause of my issue. In sharepoint, what position exactly would you put the doc type?

Anonymous said...

that was insanely simple.. wow very nice! thanks for writing the article.

Anonymous said...

Yeah...except that even with a doctype, which I always use, there's still the annoying flicker.