Using jQuery to update multiple background CSS definitions

Question

Can anyone think of a way to update more than one background definition at a time?

I've gotten this far with some code but I want to update a lot of different flavors of gradient background for one element.

$('ul#tabs li').on('mousemove',function(e){ 
var x= Math.round(((e.pageX - this.offsetLeft)*100)/$(this).width());
x= x-10;
$(this).find(".highLight").css({
    'background': '-webkit-linear-gradient(left, 
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.5)'+x+'%,
        rgba(255,255,255,0) 100%)'
});});

Any thoughts would be greatly appreciated.

thirtydot · Accepted Answer · 2012-02-21 16:55:31Z

2

You could use http://lea.verou.me/prefixfree/

A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

..

Lets jQuery’s .css() method to get and set unprefixed properties (requires plugin)

Alternatively, you can call .css() for each browser's gradient syntax:

var $highLight = $(this).find(".highLight");
$highLight.css('background', '-webkit-linear-gradient( .. )');
$highLight.css('background', '-moz-linear-gradient( .. )');
//include others such as opera, old webkit, microsoft
$highLight.css('background', 'linear-gradient( .. )');

Only the gradient syntax that each browser supports will be applied.

edited Feb 21, 2012 at 16:55

answered Feb 21, 2012 at 16:41

thirtydot

229k51 gold badges393 silver badges354 bronze badges

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

1 Comment

Matthew Davis Over a year ago

The alternative worked. (Couldn't make prefixtree do much of anything, odd.) Functions in all my test browsers now. Fantastic, thank you! It's odd, I just assumed that any new definition of background would overwrite the previous version. In fact, it's kind of crazy that it doesn't.

Collectives™ on Stack Overflow

Using jQuery to update multiple background CSS definitions

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