CODEWITHSUNDEEP
jquerycsspropertiesfallback
JimDaniel
JimDaniel

Reputation: 12703

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

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.

Upvotes: 2

Views: 597

Answers (3)

rkw
rkw

Reputation: 7297

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

Upvotes: 0

JimDaniel
JimDaniel

Reputation: 12703

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);

Upvotes: 1

Ryan
Ryan

Reputation: 28187

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.

Upvotes: 0

Related Questions