jQuery CSS Gotcha with Relative File Paths
jQuery gave a colleague and I a run for our money today at work. We were using jQuery to change the background image after a mouse event. Problem was, after the event, the image would not show up even though the path to the image was *correct. Our site is set up so the html files are at the root with css and images in their own folders off of the root folder. The external CSS for the background image:
background-image: url('../images/background.jpg');
Without thinking much about it, I set jQuery to change the CSS path to the other image just like in the external CSS file$('#background_spot').css('backgroundImage',"url('../images/event_background.jpg')");Every time the event would fire the path would be changed but there would be no image. Argggg! (cue the head scratching here) After a few minutes of wondering what was wrong with me and talking to myself it finally dawned on me…
Gotcha…
jQuery changes CSS inline rather than to an external CSS document meaning that my relative path was invalid. My jQuery CSS image path needed to be $('#background_spot').css('backgroundImage',"url('images/event_background.jpg')");
After making the change for the path of the image to be from the html file we were all smiles.
Photos: