Recently noticed a bug in JS.setCss
. The CSS values can't contain colons; which means you can't use it for setting background-image
or similar properties.
Here's a fixed version (also slightly more efficient, and sets all the properties at the same time rather than one by one which can make a difference in some edge cases):
function setCss(element, cssString) {
var style = {};
$.each(cssString.split(';'), function (index, rule) {
rule = rule.split(':');
var key = rule.splice(0,1)[0];
style[key] = rule.join(':');
});
$(element).css(style);
}
If you're using the web editor, you can apply the fix by adding a line to the UI Initialisation script:
JS.eval("setCss=function(s,i){var n={};$.each(i.split(';'),function(s,i){var c=(i=i.split(':')).splice(0,1)[0];n[c]=i.join(':')}),$(s).css(n)};")
(You can do the UI Initialisation script version if you're in the offline editor too, that's what I did! Which is obvious but just in case you're like me and need things spelled out!)
Update: could still be a little neater and more efficient:
function setCss(element, cssString) {
$(element).css(cssString.split(/;\s*/).reduce(function (rule, obj) {
rule = rule.split(/:\s*/);
obj[rule.splice(0,1)] = rule.join(":");
return obj;
}, {}));
}