Question

In a response to another user, I’ve upgraded the jQuery plugin iCheckbox to work with jQuery 1.5 and 1.6 (in Safari). This is described in my answer here:

jquery 1.4.2 working for iCheckBox and not jquery 1.6

But for some reason it is not working in FF4, and I need help finding the bug that affects FF4 in the code found here:

http://fiddle.jshell.net/mikkelbreum/HAGMp/

I would like help to make it work, and also some general tips on how to debug this kind of thing with firebug (I don’t get it to produce any errors, that’s the problem, so I have no clue where it’s going wrong. But it probably has to do with the animation or the conditional checking.)

Open this is Safari (works) and in FF4 (broken, no animation happening):
http://fiddle.jshell.net/mikkelbreum/HAGMp/show/

I would also like to know if it works in IE7,8,9 or not?

Answer 1

Update: I took a deeper look at the plugin, a lot of extra work is going on, here’s a much slimmer version that does the same stuff but doing less work and works in FF4 (without the CSS/animation plugin from the other answer listed below).

Additionally I made some tweaks – you can now click on the image before the animation finishes to toggle it back, no need to wait for the animation to finish to determine the state – instead we’re using the state of the checkbox (which is also immediately affected now). The API is the same, only the internals of the plugin changed here.

/*
* iCheckbox - Inspired Checkbox v0.1
*
* Convert a checkbox or multiple checkboxes into iphone style switches.
*
* This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.
*
* Features:
*    * Because checkboxes are used, this is compatable with having javascript off for form submission.
*    * Affects only checkboxes.
*    * Synchronizes the actual state of the checkbox for on or off status.
*    * Completely self-contained for each checkbox.
*    * Changes fire the onchange event of your checkbox.
*    * Relies purely on css for styling... no passing anything but your slider image.
*    * Because functionality is decoupled from CSS, you can assign custom CSS classes if you wish making it possible for multiple version per page.
*    * Completely inline like a normal checkbox. No sliding-door-float madness.
*
* iphoneSwitch Author: Daniel LaBare
*    iCheckbox Author: Bryn Mosher
*   iphoneSwitch Date: 2/4/2008
*      iCheckbox date: 2/26/2010-2/27/2010 (like most of you I'm a nite owl :P)
*/

// convert the matched element into an iCheckbox if it is a checkbox input
jQuery.fn.iCheckbox = function(start_state, options) {

    if(this.length == 0 || this[0].type != 'checkbox') return this;

    // define default settings
    var settings = jQuery.extend( {
        // switch_container_src is the outer frame image of the slider
        // you assign the actual slider image via css
        switch_container_src: 'images/iphone_switch_container.gif',
        // The height of your slider
        switch_height: 27,
        // The width of your slider
        switch_width: 94,
        // switch_speed is the speed of the slider animation.
        // Warning: Your onchange() even won't be fired until the end of this!
        switch_speed: 150,
        // How far your actual slider image has to move to change to the "off" state.
        // This can be either positive or negative based on the layout of your image.
        // The "on" state expects this image to have backgroundPosition: 0px.
        switch_swing: -53,
        // CSS class of the container if you wish.
        class_container: 'iCheckbox_container',
        // CSS class of the switch.
        // This should have your actual "on"/"off" image set as its background-image.
        class_switch: 'iCheckbox_switch',
        // CSS class of the checkbox if you wish it shown.
        class_checkbox: 'iCheckbox_checkbox',
        checkbox_hide: true,
        // animate off function
        iCheckToggle: function (elem, atime, animOnly) {
            var img = jQuery(elem).siblings('img');
            atime = typeof(atime) == 'number' ? atime : settings.switch_speed;
            img.stop(true).animate({ backgroundPositionX: (elem.checked ? '0' : settings.switch_swing) + 'px' }, {
                duraton: parseInt(atime) > 0 ? atime : 1,
                easing: 'linear',
                step: function(cur, opt){
                   img.css("background-position", opt.now + "px 0px");
                }
             });
        },
    }, options);

    // set initial state
    this.prop('checked', start_state == 'on');

    // create the switch
    return this.each(function() {
        // make the container
        var container = jQuery(this).wrap($('<span />').addClass(settings.class_container)).parent();
        // make the switch image based on starting state
        jQuery('<img class="'+settings.class_switch+'" src="'+settings.switch_container_src+'" />')
            .appendTo(container);
        // sync the checkbox to initial state
        // must have a positive time for the initial event to fire
        settings.iCheckToggle(this, 1);
        // bind clicking on the image
        jQuery(this).siblings('.'+settings.class_switch).click(function (e) {
            jQuery(this).siblings('input').click();
        }).end()
          // assign the class to it
          .addClass(settings.class_checkbox)
          // finally hide the checkbox after everything else is declared - we do this for syntax checking
          .toggle(!settings.checkbox_hide)
          // bind clicking on a visible checkbox
          .change(function (e) {
            settings.iCheckToggle(this, settings.switch_speed, true );
        });
    });
};

You can test it out here.

---

Original answer:

Background position sliding has been a bit quirky in firefox, the properties are in percent rather than px (try your demo here, look at the alert on click in firefox vs. chrome), so the animation engine just doesn’t handle it correctly. The easiest way to bypass this is hooking into the animation/CSS hooks available in jQuery, you can see a working example of that in this answer.

Also you’ll want to change to the standard backgroundProperty, rather than specifically backgroundPropertyX here, like this:

.animate({backgroundPosition: settings.switch_swing+'px 0'}, atime, 'linear')

and further down:

.animate({backgroundPosition: '0 0'}, atime, 'linear')

Here’s the code from the other answer combined with the above in your demo, working in FF4.

Note: the above code changes (in this answer only) fix the position, the code in the other answer linked is what fixes the animating to get to that position, for example here’s a version without the animation, if you’re curious.