jquery's .css() and gradients

Question

I have looked at several questions but I can't seem to make the .css() work with the variables and gradient I want. You should be able to drop two colors into the inputs and BANG it gives you a gradient but no dice. Any suggestions?

Below is my JQ:

$(document).ready(function () {
var colorTop = $("#color1").keyup(function () {
    var color1 = $("#color1").val();
    $("#demo").css("background", color1);
});

var colorBottom = $("#color2").keyup(function () {
    var color2 = $("#color2").val();
    $("#demo").css("background", color2);
});

function changeGradient(colorTop, colorBottom) {
    $("#demo").css({
        background: 'linear-gradient(' + colorTop + ', ' + colorBottom + ')'
    });
};
});

https://jsfiddle.net/xyhjppph/3/

and i forgot to add the jsfiddle: Here's my JSFiddle: jsfiddle.net/xyhjppph/3 — Alex Marple
– Alex Marple, Commented Mar 10, 2015 at 20:26
A jsfiddle link is nice, but also show your code in your question. — bloodyKnuckles
– bloodyKnuckles, Commented Mar 10, 2015 at 20:38
@bloodyKnuckles You got it. I added the JQ I'm using for this. — Alex Marple
– Alex Marple, Commented Mar 10, 2015 at 20:41

Cjmarkham · Accepted Answer · 2015-03-10 20:33:42Z

1

You aren't calling changeGradient anywhere. I suggest adding a button that will take the output of both inputs when clicked to change the background.

Like this https://jsfiddle.net/jyh18cnk/1/

Or, if you don't want the button, you could make the variables for colors global

Like this https://jsfiddle.net/ao0escev/1/

answered Mar 10, 2015 at 20:33

Cjmarkham

9,7236 gold badges52 silver badges85 bronze badges

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

3 Comments

Alex Marple Over a year ago

That does work but I was hoping to have it simply work when the values of both inputs are entered. I'm suddenly realizing that might take a lot more code than I initially thought.

Cjmarkham Over a year ago

Check the second fiddle. The background is updated when the values are entered, without a button

Alex Marple Over a year ago

You are a winner. Thanks!

Collectives™ on Stack Overflow

jquery's .css() and gradients

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related