Declaring CSS3 Gradient with jQuery

Question

I am adding a css3 gradient to a button. I think jQuery is combining all of my cross-browser 'background-image' declarations as just one declaration (the last 'background-image' that it finds). Is there a better way to write the jQuery so it presents to the browser all the cross-browser css as it normally would?

Here is my jQuery:

        $('.button').css({
        'background-color' : FromGradientColor ,
        'background-image' : '-webkit-gradient(linear, 0% 0%, 0% 100%, from('+ FromGradientColor +'), to('+ ToGradientColor +'))' ,
        'background-image' : '-webkit-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-moz-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-ms-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-o-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' 
    });

This is what I want jQuery to present to the browser (except the colors which are determined by my variables in jQuery):

background-color: #ddd;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
text-shadow: 0 1px 0 rgba(255,255,255,.8);

Exact duplicate of Build JavaScript Object to use with jQuery .css() (what about duplicate keys?). Unless the styles have to applied dynamically, I recommend to use a CSS preprocessor, such as LESS or SASS. — Rob W
– Rob W, Commented Jun 15, 2012 at 17:35
Agree with Rob... However you you really want to do it this way you should be able to determine which rendering engine youre in using JS and then only apply one of the gradient properties... — prodigitalson
– prodigitalson, Commented Jun 15, 2012 at 17:44
I am familiar with Less however never used it with jquery. Is it possible to use Less within jQuery? — infatti
– infatti, Commented Jun 15, 2012 at 19:50

Paul Sweatte · Accepted Answer · 2016-01-31 09:36:00Z

1

Put the styles into a class, such as this less example:

@bgcolor: #ddd;

.gradient(@from: #eee, @to: #ccc) 
  {
  background-color: @bgcolor; 
  background-image: -webkit-linear-gradient(top, @from, @to); 
  background-image: -moz-linear-gradient(top, @from, @to); 
  background-image: -ms-linear-gradient(top, @from, @to); 
  background-image: -o-linear-gradient(top, @from, @to); 
  filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=@{from}, endColorstr=@{to})"; 
  -ms-filter: "'progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=@{from}, endColorstr=@{to})'"; 
  }

Then reference it as such:

$('.button').addClass("gradient")

edited Jan 31, 2016 at 9:36

answered Feb 27, 2013 at 22:11

Paul Sweatte

24.7k7 gold badges131 silver badges270 bronze badges

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

Collectives™ on Stack Overflow

Declaring CSS3 Gradient with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related