WP Docking Boxes not Working on Chrome?

I first came across the awesome Docking Boxes (dbx) on Nick La’s awesome theme, iTheme. Not sure what Docking Boxes are? Look at the side of this blog. You can drag the widgets up and down and collapse or expand them as you want. This is all thanks to some really great code from Brothercake.

To the best of my knowledge iTheme was the first WordPress Theme to look very much like a Mac, hence it was extremely popular. In fact a lot of themes have tried to use the concepts behind iTheme, including using the very same dbx code that runs behind iTheme

1. MangoOrange developed a 3 column format for iTheme, which, naturally uses docking boxes.
2. PageLine’s iBlog2 and a host of other themes use the same dbx code as in iTheme.

In fact I was using the docking boxes code from iTheme for Suffusion myself (I was too lazy to download and configure it from the original), so I was surprised when I found that it didn’t work as expected in Chrome. In particular I could not get the widgets to expand or collapse.

I ran tests on all the above themes as well – none of them seemed to have this working. I figured it was because iTheme was a pretty old release. Quoting from the website:

Tested on WordPress 2.0 and 2.1 on the following browsers: IE, Firefox, Safari, Opera

Given that at the time of writing the current version of WordPress is 2.8.4, this is a really old theme, which definitely predates Chrome.

Anyway, for theme developers out there, the fix is really simple:

1. Make a backup of dbx.css and dbx-key.js in your theme.
2. Download the latest release from Brothercake.
3. You only need three files from the original – dbx.css, dbx.js and dbx-key.js. Copy these into your theme’s directory.
4. Merge changes you had made in your stylesheet dbx.css to the new file.
5. You don’t need to touch the new dbx.js
6. You will need to make only one tweak to dbx-key.js, which is to rename the variable that invokes dbxGroup to whatever it was earlier:

   var sidebar = new dbxGroup(

That’s it – you are set. Now you can test it out on all browsers – it should work.