Useful info. Fortunate me I discovered your site unintentionally, and I am stunned why this twist of fate didn’t happened earlier! I bookmarked it.

Hi,

How can I do that in javascript I can decide whether the switch is on or off? But not in .js

Thanks

Hi, Nice Work, How to change background color ( black/white ) or any css with this ?

Thanks
Best Regards

The problem seems to be in this line of code –

image = jQuery(”);

and

jQuery(this).click(function() {
if(state == ‘on’) {
jQuery(this).find(‘.iphone_switch’).animate({backgroundPosition: -53}, “slow”, function() {
jQuery(this).attr(‘src’, settings.switch_off_container_path);
switched_off_callback();
});
state = ‘off’;
}
else {
jQuery(this).find(‘.iphone_switch’).animate({backgroundPosition: 0}, “slow”, function() {
switched_on_callback();
});
jQuery(this).find(‘.iphone_switch’).attr(‘src’, settings.switch_on_container_path);
state = ‘on’;
}
});

When i remove background-position:’+(state == ‘on’ ? 0 : -53)+’px” from first bit of code – then I can see the ON/OFF image on IE but once clicked, it’s again get disappeared. Looks like IE doesn’t like background-position property.

Also, if you try to view this example demo on IE6 -it will show you the blank image with no ON and OFF display.

Any fix??

@raf Of course you can.

thx for your reply, i will try your suggestion later.
working something correctly on IE is always a pain….

Anyway to possibly use the status of the switch in code?

Do you by chance have the .psd for the switch? I’d love to make multiple skins for it

Austin

Hi… nice little plugin here….

I’d like to make one suggestion….

change the “click handling” section to pass the through to the callback events, a la:


jQuery(this).click(function() {
...
switched_off_callback(this);
...
switched_on_callback(this);
...
});


that way


$(".Boolean").iphoneSwitch(
"on",
function(obj) {
//do something on change to "on"
},
function(obj) {
//do something on change to "off"
}
);


that way if there are multiple objects wired to this plugin, there is some hook to be able to tell “where” we are inside those events…

thanks for reading….

- Stephen

ERROR!
text code inside file jquery.iphone-switch.js:

image = jQuery(”);
Pay attention to the end – there is an extra div-tag! It must be removed, otherwise, you will not see the switch in IE-browsers.
Thanks.

So is there a way to have it load the on.html at page load?

Cool, lots of people are copying the iPhone GUI these days.

On a side note, could you make your RSS feed display full posts so I don’t have to come out of Google Reader. It kind if makes the point of an RSS feed useless.