jQTouch and iButton.js

[A. Jesse Jiryu Davis]

Hi all, a while ago there was a discussion about bugs when using
jQTouch with iButton.js. Here's the discussion:

http://groups.google.com/group/jqtouch/browse_thread/thread/38d5535369ed3511

And here's info about iButton.js, which is a plugin to make iOS-style
toggle switches out of checkbox inputs:

http://www.givainc.com/labs/ibutton_jquery_plugin.htm

Of course you could just use jQTouch's builtin toggles, but iButton
has some advantages, notably if (like me) you're trying to use jQTouch
to make a pretty web app that works in Firefox and IE as well as
Webkit browsers.

So, I've discovered the precise problem with combining these two
libraries.

When jQTouch initializes, it styles every top-level div with
display=none, except for the currently showing div. Here's the CSS
rules it uses:

#jqt > * {
display: none;
}

#jqt > .current {
display: block !important;
z-index: 10;
}

When iButton initializes, it wraps every checkbox with its fancy
toggle-control HTML, and then it measures the width of the HTML it
created so it knows how far to slide the toggle control when a user
clicks on it.

Alas, it's impossible to measure the width of a hidden element.

My solution is to wait for jQTouch to display a page before I run
iButton on the checkboxes in that page, like so:

var pagesWithCheckboxes = _.uniq($
('input[type="checkbox"]').closest('div.page'));
_.each(pagesWithCheckboxes, function(page) {
var $page = $(page);
$page.bind('pageAnimationEnd', function(e, info) {
if(info.direction === 'in') {

$page.find('input[type="checkbox"]').iButton();
}
});
});

_.uniq() and _.each() are from underscore.js. I use _uniq() to ensure
I don't bind the event handler multiple times to pages with multiple
checkboxes.

Hope this helps.