Using jQuery .css() With Variable

Question

I'm using jQuery to dynamically change the background image on a div. Here's my code:

$.ajax({
    url: '/countries/' + currentHash,
    type: 'GET',
    dataType: 'html',
    complete: function(xhr, textStatus) {
        //called when complete
    },
    success: function(data, textStatus, xhr) {
        $('#info').empty();

        var country_id = $('div#country_id', data).text();
        $('#fancybox-outer').css('background', "#ffffff url(\"/system/backgrounds/" + country_id + "/large.jpg\") no-repeat top right");
        // $('#fancybox-outer').css('background', '#ffffff url("/system/backgrounds/4/large.jpg") no-repeat top right');

        $.fancybox(
            $('#info').html(),
            {
                autoDimensions   : false,
                width            : '800',
                height           : '600',
                speedIn              : 600,
                speedOut             : 200,
                // scrolling             : 'no',
                padding : 0,
                centerOnScroll : true,
                overlayColor : '#333333',
                overlayOpacity : 0.8,
                transitionIn : 'fade', // 'elastic', 'fade' or 'none'
                transitionOut : 'elastic', // 'elastic', 'fade' or 'none'
                hideOnOverlayClick : false,
            }
        );                                                      

    }
});

Everything else is working great in the code. I actually took some out so that it's easier for your to read. It's getting the country_id within the div. I've tried appending the country_id variable into a div on the page to make sure that it's getting it and it is. But this part just isn't working:

    var country_id = $('div#country_id', data).text();
    $('#fancybox-outer').css('background', "#ffffff url(\"/system/backgrounds/" + country_id + "/large.jpg\") no-repeat top right");
    // $('#fancybox-outer').css('background', '#ffffff url("/system/backgrounds/4/large.jpg") no-repeat top right');

The commented out part works. Any thoughts on what I should do?

Thanks!

What is the value of your country_id variable at that point in the code? Are you sure it contains what you expect? — Jamie Dixon
– Jamie Dixon, Commented Jun 21, 2011 at 15:55
In what way is it "not working"? You get a javascript error, the url is not set? The url for the div is wrong? — KingErroneous
– KingErroneous, Commented Jun 21, 2011 at 15:55
Are you getting an error at all? Is it that it cannot locate the image? I know there is an issue with the url function where is relative to page instead of the css file. — boca
– boca, Commented Jun 21, 2011 at 15:58

Andrew Cooper · Accepted Answer · 2011-06-21 15:55:11Z

2

Try modifying the quotes like this:

$('#fancybox-outer').css('background', '#ffffff url("/system/backgrounds/' + country_id + '/large.jpg") no-repeat top right');

You may also need to make sure that country_id doesn't contain any whitespace

var country_id = $('div#country_id', data).text().trim();

answered Jun 21, 2011 at 15:55

Andrew Cooper

32.7k5 gold badges86 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marc Over a year ago

It was the trim! Thanks so much!

Collectives™ on Stack Overflow

Using jQuery .css() With Variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related