How do you combine strings and variables as properties in the .css() method in jQuery?
I can easily do it if setting background-position-x and background-position-y but they aren't supported in Firefox & Opera.
function bgPos() {
jq('element').each(function() {
var bgPosX = 10;
var bgPosY = 20;
jq(this).css("background-position", "bgPosX + 'px', bgPosY + 'px'");
});
}
The other answers here are incorrect as jQuery's css() method does not support 3 parameters and they will cause your bgPosY value to be ignored completely (and defaulted to 50%). I'm not actually sure how one of them received multiple upvotes...
You have two options here:
You can concatenate your two variables into one string by using the + symbol:
.css({ backgroundPosition: bgPosX + "px " + byPosY + "px" })
Note how I've removed the comma between px and bgPosY and added a space to separate the two: "px ".
Alternatively you can just set the individual backgroundPositionX and backgroundPositionY properties:
(Edit: as Blazemonger has pointed out in this comment, these individual properties aren't supported in Firefox, so if you wish to support Firefox you should use the first option instead).
.css({
backgroundPositionX: bgPosX,
backgroundPositionY: bgPosY
})
Worth noting that I'm using object notation here rather than using strings, simply because I find this to be neater. You can stick to using "background-position" for the first example, and use "background-position-x" and "background-position-y" for the second example if you'd prefer.
.css doesn't accept 3 argument, so you can achieve what you want by giving an object.
say like bellow
jq(this).css({ backgroundPosition: bgPosX + "px " + byPosY + "px" });
css() method does not accept 3 arguments like you've done here.
css() method accepts one or two arguments. Please refer to jQuery's documentation: api.jquery.com/css. You've now just copied what I put in my answer.Get rid of the quotes around the variable:
jq(this).css("background-position", bgPosX + 'px' + bgPosY + 'px');
And get rid of the second comma...
