Put jQuery variable in css gradient

Question

I have this code which generates the RGB values from a hex code.

            <script>
            var s = "<?php the_field('phpvariableforcolour'); ?>";
            var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
            var matches = patt.exec(s);
            var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");";
            alert(rgb);
            </script>

I want to then apply the rgb variable (which is currently in an alert) to an inline css style where the RGB values appear e.g. rgba(0,0,0,0.0) : -

            background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
            background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
            background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
            background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));
            background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,0.2));

I can't see to find a way to do this, with jQuery I can add background-image, but not all these.

Steely · Accepted Answer · 2014-10-24 17:42:53Z

3

You could use the ".css()" function in jQuery.

http://jsbin.com/vukize/1/edit?js,output

the HTML I used:

<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>jQuery inline RGB Values</title>
</head>
<body>
  <div id="colorObject"></div>
</body>
</html>

the jQuery:

var rgba = "rgba(110,131,37,0.5)";
var rgbaTwo = "rgba(10,131,37,1)";

$('#colorObject').css({
  'background' : '-webkit-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
  'background' : '-moz-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
  'background' : '-o-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
  'background' : '-ms-linear-gradient(left,' + rgba + ', ' + rgbaTwo + ')',
  'background' : 'linear-gradient(to right,' + rgba + ', ' + rgbaTwo + ')'
});

edit: Looks like a couple people beat me to it. ;)

double edit: So, it seems the problem is a semicolon where it shouldn't be if it's being used in a css(); function.

Change:

var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");";

to:

var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";

Now using it as a variable in a css(); function will work.

edited Oct 24, 2014 at 17:42

answered Oct 24, 2014 at 16:23

Steely

1177 bronze badges

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

4 Comments

MrUpsidown Over a year ago

To your edit: it's still the best answer, explained and with an example :-)

Steely Over a year ago

k, I think I got it. So your question: "HOW CAN I USE THE RESULTING RGB NUMBERS INSIDE THE rgbaTWO, THE OUT PUT IS IN THE CORRECT FORMAT OF: 5,5,5 - I JUST CAN'T DISPLAY IT" So, I put an alert in to see the actual string value and it is "rgb(255,0,0);" the problem is the semicolon. You don't use them inside of "css();" Different pieces are separated by commas. example: $('something').css({ 'background' : 'rgb(5,5,5)', 'background' : 'rgb(255,0,0)' });

Steely Over a year ago

So, change var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+");"; to var rgb = "rgb("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+")";

bigdaveygeorge Over a year ago

Yes this is exactly what was needed. Thnx.

web hobbit · Accepted Answer · 2014-10-24 16:08:29Z

1

It is not possible to assign javascript variable value to css properties.

for your case the best solution is to use .css it well be something like this :

$(your-selector).css({
  background: "-webkit-gradient(linear, left top, left bottom, from("+rgb+"), to(#ccc))"
  ....
});

change (left top, left bottom) to your (@origin) values.

answered Oct 24, 2014 at 16:08

web hobbit

5014 silver badges17 bronze badges

3 Comments

bigdaveygeorge Over a year ago

$(.info).css({ background-image: "-webkit-linear-gradient(left, rgba("+rgb+",0), rgba(0,0,0,0.2));" background-image: "-moz-linear-gradient(left, rgba("+rgb+",0), rgba(0,0,0,0.2));" background-image: "-o-linear-gradient(left, rgba("+rgb+",0), rgba(0,0,0,0.2));" background-image: "-ms-linear-gradient(left, rgba("+rgb+",0), rgba(0,0,0,0.2));" background-image: "linear-gradient(left, rgba("+rgb+",0), rgba(0,0,0,0.2));" }); UNEXPECTED TOKEN .

MrUpsidown Over a year ago

Your are missing quotes: $('.info')

web hobbit Over a year ago

@6h8j5 can u please use the example that i have posted don't use background-image just background and not -webkit-linear-gradient just -webkit-gradient and so on ....

L.H · Accepted Answer · 2014-10-24 16:24:07Z

0

You could use the $('el').css("background-image","value");

Something like:

var rgb = ""+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+"";

$('el').css("background-image","linear-gradient(@origin, rgba("+rgb+",0.0), rgba("+rgb+",0.2)");

Read more on: http://api.jquery.com/css/

edited Oct 24, 2014 at 16:24

answered Oct 24, 2014 at 16:12

L.H

3231 silver badge7 bronze badges

2 Comments

MrUpsidown Over a year ago

Me. Reason: learn how to answer stackoverflow.com/help/how-to-answer and how to format it stackoverflow.com/help/formatting

MrUpsidown Over a year ago

I removed my downvote because you took the time to edit it. It's still not a good answer though but OP will decide that.

Collectives™ on Stack Overflow

Put jQuery variable in css gradient

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related