CODEWITHSUNDEEP
jquerygoogle-chromecss
Alex
Alex

Reputation: 36596

JQuery in Google Chrome can't find background image

I have a button that I want to change the background of to show that it is disabled when a user clicks on it. It works fine in IE/FF but in chrome it seems that it can't find the background image and makes the background nothing.

alt text

I am just doing a simple css set in jQuery 1.2.6

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");

Upvotes: 4

Views: 4797

Answers (5)

Soviut
Soviut

Reputation: 91585

I would also suggest consolidating all your background images into a single image like this. You then use background-position offsets to do your rollover effects. You can exploit this technique even further by making a very long button image (with both its normal and rollover state in it) and left and right align it to produce your 'sliding doors'.

Upvotes: 0

Alex
Alex

Reputation: 36596

Ok i've managed to track down the problem. As tvanfosson said it is because WebKit isn't downloading the images. To get around this i just load both images in the unclicked class

<style>
.unclicked {
 background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
 background-image: url('/Portals/_default/images/buttons/checkout-end.gif');
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>

Upvotes: 5

Hemanshu Bhojak
Hemanshu Bhojak

Reputation: 17288

Instead of "background-image" use "backgroundImage"

Upvotes: 1

tom
tom

Reputation: 2077

Try the full "background", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat".

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532595

The way I would tackle this is with classes. Have a separate CSS classes for each of the button states, then simply use jQuery to change the class of the button. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this).

<style>
.unclicked {
 ...
}
.unclicked :hover {
 ...
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>
...
$(".CheckoutBt").click( function() {
    $(this).removeClass('unclicked').addClass('clicked');
    ...do what ever action...
});

Upvotes: 1

Related Questions