Question

I have a variable for the background-image attribute of an element that I need to modify every 60 seconds by some backend logic in a rails app.

How can you get a variable or method value from a helper on into the css for a view?

Presently I have a helper that culls a an updated URL from another source. I need to trigger this helper call every minute in order to get an updated URL for the source image that’s being masked by the following css:

.bg {
    background-image: url(http://mydomain.tld/someimage.jpg);
    background-repeat: no-repeat;    
    background-size: 203%;
    background-position: top left; 
    width: 256px;
    height: 256px;  
}

The background-image url is what needs to be refreshed on the minute.

Answer 1

As far as I know you can’t really directly access the CSS from your view code – however you could certainly apply CSS styles using Javascript (JQuery makes it easy and ships with rails by default), and you could use an instance variable from your controller in that Javascript.

Alternately you could use inline CSS in your view – but that seems even nastier than the JS solution.

edited:

Here is the gist of what I’m talking about – this isn’t tested, but should give you a start.

$(document).ready(function() {
    var refreshImage = function(){
        $.ajax({
              url: 'your helper url here',
              success: function( data ) {
                $(".bg").css("background-image" "url(" + data.url + ")"); 
                 setTimeout(refreshImage(), 60000); 
              }
        });
    }
    refreshImage();
});

Basically, you can set up a call on document ready that will fetch the image url from some action that you define, then set it on your page, and “schedule” itself to fire again in 60 seconds.