Noah Blumenthal's Blog

September 10, 2008

jQuery Accordion — whitespace issue with list

Filed under: Uncategorized — noahblu @ 6:07 pm
Tags: , ,

Choffi has this cool side-bar navigation using an accordion (the idea was taken mainly from apple’s website which has a similar thing) that’s supposed to look something like:

This is what it should look like

This is what it should look like

I’m using jQuery 1.2.6 and jQuery UI 1.5.2.  Everything looks fine in FF, but when I open it in IE7 it looks really bad (although it works):

What's with all the white space?

Ugggghhhh

After some tinkering, I tracked the issue down to the fact that the Accordion sticks a span element before and after each of my list items (<li>Test</li> becomes <span></span><li>Test</li><span></span>) which is forcing everything down I suppose because my li styles indicate the use of background images.  I just LOVE FireBug (https://addons.mozilla.org/en-US/firefox/addon/1843)

Anyway, I edited the ui.accordion.js file to read:
if (!this.options.disableLeftSpan)
$(“<span class=’ui-accordion-left’/>”).insertBefore(options.headers);
if (!this.options.disableRightSpan)
$(“<span class=’ui-accordion-right’/>”).appendTo(options.headers);

on lines 42-45 — basically I just added an if statement before both the left & right spans are added.  Now I can make my call like so (notice the disableLeftSpan & disableRightSpan):

$(“#nav_accordion”).accordion({
active: false,
event: ‘mouseover’,
fillSpace: true,
disableLeftSpan: true,
disableRightSpan: true
});

and it looks good even in IE7!

I submitted a bug to the jQuery UI team, but until someone integrates these changes, it’s easy to do yourself.

About these ads

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Rubric Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: