CODEWITHSUNDEEP
jquerygradient
Alex Marple
Alex Marple

Reputation: 3048

jquery's .css() and gradients

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/

Upvotes: 0

Views: 48

Answers (1)

Cjmarkham
Cjmarkham

Reputation: 9700

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/

Upvotes: 1

Related Questions