AJAX RJS manipualation background image broken in IE 6

Rails Deployment
1

Let’s see who’s got the best cross-browser chops!

Here’s my problem:

#OBJECTIVE : change the background image of a div and have it work in IE
6/7 and the real browsers.

#HTML:

...

At this point, my background image (image_one.png) is visable in all
three broswers. Upon an AJAX request, I’d like to update the background
to ‘image_two.png’. To accomplish this, I use RJS.

#RJS:

page[‘my-div’].setStyle(:background=>url(‘http://www.foo.com/image_two.png’)
")

#RESULTS:
This works in firefox, but not in IE (v6, SP2), or Safari.

#QUESTIONS:

  1. Is my RJS technique correct? Is there a more idiomatic/correct
    technique?
  2. The seems like this a rather common programming objective, and there
    should be a straight-forward solution. Are other people doing this?
  3. My cross-brower knowledge is not that great, but I’d love to find a
    good discussion of this topic, if someone knows of one.
2

Link to an external sheet and use classes. I’ve never had a problem
doing it that way. It’s kind of frowned upon to use inline styles.

/* styles.css */
element.regular { background:url(images/image_one.png) no-repeat; }
element.alternate { background:url(images/image_two.png) no-repeat; }

Then with rjs, just remove the regular class name and add the
alternate or you can just add !important to the element.alternate
style declaration.

Does that make sense?

3

John,

Thank you for your reply.

It certainly makes sense…but there’s rub. Perhaps not insurmountable.
The problem is that the name of the file to serve as the background
images is determined at run-time. Thus, referencing an external
stylesheet would not be possible. However, I could use style tags like
this:

element.regular { background:url(images/#{regular}.png) no-repeat; } element.alternate { background:url(images/#{alternate}.png) no-repeat; }

Thanks again, and I’ll report back.

4

http://blog.hasmanythrough.com/2007/10/18/simpler-than-dirt-restful-
dynamic-css

That will help if you are on a new enough version of trunk.