Question

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??

Answer 1

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");
  });
});