Click here to Skip to main content
15,041,525 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
okay - I am trying to make use of jquery plugin for iphone switch. But IE is giving problem in displaying the background image.

Here is the code that's causing trouble -

image = jQuery('<img class="iphone_switch" style="height:'+settings.switch_height+'px; width:'+settings.switch_width+'px; background-image:url('+settings.switch_path+'); background-repeat:none; background-position:'+(state == 'on' ? 0 : -53)+'px" src="'+(state == 'on' ? settings.switch_on_container_path : settings.switch_off_container_path)+'" />');

when I remove
background-position:'+(state == 'on' ? 0 : -53)+'px"
from above code - then I can see ON/OFF background image on IE but as soon as i click the button, it's again disappeared.

Here is the click function -

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);
				state = 'off';
			else {
				jQuery(this).find('.iphone_switch').animate({backgroundPosition: 0}, "slow", function() {
				jQuery(this).find('.iphone_switch').attr('src', settings.switch_on_container_path);
				state = 'on';

Any suggestions?


1 solution

I faced the same problem with IE8.. Finally got time to resolve it today.

On line 37 where an image element is being created.. instead of using a closing tag ix it and it will work

have fun.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900