Is it possible to update multiple fallback CSS properties using JQuery?

Question

Here is my problem. I want to update the background-image gradient of my site in real-time using JQuery, but I can't find a way to update multiple fallbacks for the same property. I need multiple fallbacks of course for cross-browser support. Here is what my class looks like:

#bg_gradient
{
   background-color: #dcbebe; 

   background-image: url(images/fallback-gradient.png); 

   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779eb0), to(#dcbebe));

   background-image: -webkit-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -moz-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -ms-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -o-linear-gradient(top, #779eb0, #dcbebe);
}

And then my JQuery:

$('#bg_gradient').css('background-image','url(../gradient.png)');
$('#bg_gradient').css('background-image','-webkit-linear-gradient(top, #fff, #000)');
$('#bg_gradient').css('background-image','-moz-linear-gradient(top, #fff, #000)');
...

Of course, as expected using this method, the same background-image property is just being overwritten.

How can I update multiple fallback properties dynamically? Is it possible?

UPDATE: I forgot to mention that I am generating gradient transitions using an algorithm, and have hundreds of values to dynamically update.

JimDaniel · Accepted Answer · 2011-08-07 15:40:20Z

1

By calling attr() I can update the style attribute directly, and pass in whatever I want, for example here is what I am doing:

var wk = '-webkit-linear-gradient(top, ' + color_one + ',' + color_two + ')'
$('#bg_gradient').attr('style', 'background-image:url(../image.png);background-image:' + wk);

answered Aug 7, 2011 at 15:40

JimDaniel

12.8k9 gold badges64 silver badges68 bronze badges

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

Comments

Ryan · Accepted Answer · 2011-08-07 15:02:58Z

0

As you pointed out setting the same .css for a tag will just overwrite it. A workaround (painful) would be to write some conditional logic using the jQuery.browser flags and jQuery.browser.version.

answered Aug 7, 2011 at 15:02

Ryan

28.4k10 gold badges58 silver badges83 bronze badges

Comments

rkw · Accepted Answer · 2011-08-07 18:54:18Z

0

Please update if you discover a solution; but for now, are you opposed to using two different classes and just toggle between them?

answered Aug 7, 2011 at 18:54

rkw

7,2974 gold badges28 silver badges39 bronze badges

1 Comment

JimDaniel Over a year ago

I am generating transitions between gradients dynamically, so I have hundreds of values...setting the attr() directly is working for me...

Collectives™ on Stack Overflow

Is it possible to update multiple fallback CSS properties using JQuery?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related