Reputation: 12431
I am trying to change the background-image of a div by altering it's CSS via Jquery and I got it to work in FireFox but for some reason its not doing anything in chrome, I tried clearing the cache but still no luck, there's no errors in the console either, Here's my code:
$(document).ready(function() {
var bg = 1;
$("#changePic").click(function () {
if (bg == 1)
{
$("#outerWrapper").css("background-image","url(images/background-lodge1.jpg");
bg=2;
}
else if (bg == 2)
{
$("#outerWrapper").css("background-image","url(images/background-lodge2.jpg");
bg=3;
}
else
{
$("#outerWrapper").css("background-image","url(images/background-lodge.jpg");
bg=1;
}
});
});
And then my link looks like this:
<a href="#" id="changePic"><span class="sidetab">Next Photo <img src="images/arrow.png" alt="" width="10" height="14" align="absmiddle" /></span></a>
Any ideas on why this would work in firefox but not chrome??
Upvotes: 0
Views: 497
Reputation: 630637
I can't say for sure why it's not working since #outerWrapper
isn't in your posted markup. Also where is this script? Is it possible it's not being included correctly, possible a malformed <script>
tag Chrome doesn't like?
What I can provide is a way to simplify it and still be cross-browser compatible, you can use .toggle()
instead, like this:
$(function() {
$("#changePic").toggle(function () {
$("#outerWrapper").css("background-image","url(images/background-lodge1.jpg");
}, function() {
$("#outerWrapper").css("background-image","url(images/background-lodge2.jpg");
}, function() {
$("#outerWrapper").css("background-image","url(images/background-lodge.jpg");
});
});
Upvotes: 3