Proto.io provides a very nice solution for on/off switch button using CSS. However, it doesnt work in IE8. /

Anyone know how to fix it with js? Or is there any other on/off switch button solution that you would remend that would work in IE8 ?

Proto.io provides a very nice solution for on/off switch button using CSS. However, it doesnt work in IE8. http://proto.io/freebies/onoff/

Anyone know how to fix it with js? Or is there any other on/off switch button solution that you would remend that would work in IE8 ?

• javascript
• css
• internet-explorer-8

2 Answers 2

thanks for using our Proto.io flipswitch :)

Here's how to enable support for IE8, using javascript.

What you need to do is add css that will change the state of the flipswitch depending on the "onoffswitch-checked" class, and then toggle that class using javascript whenever the flipswitch is clicked.

First add these two declarations in the css:

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

Then, use javascript to toggle the "onoffswitch-checked" class depending on whether the checkbox is checked or not:

$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});

Also, if you have selected the "Switch ON by default" option, make sure to add the "onoffswitch-checked" class to your html:

<div class="onoffswitch onoffswitch-checked">

Notes:

There is a slightly cleaner way to achieve this using the change() event on the checkbox instead of the click() on the label, but unfortunately IE8 does not trigger the change() event when the label is clicked instead of the checkbox.

It would also be better to trigger the checked class on the checkbox instead of on the parent, but IE8 does not refresh the adjacent siblings CSS ( + ) when a class is changed :(

The Proto.io page mentions that "...IE8 does not support the CSS :checked selector" so is not supported. This means you could maybe get it working by including a polyfill for IE to fix this, e.g. selectivizr.

Edit: The Proto.io page also mentions (via the IE tooltip on the browser icons list) that IE8 can be supported with some added Javascript. This code has been provided here in the answer by anna.mi, who is the actual author of this switch.