Question 165734 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I get linear-gradient to work in jQuery with WordPress?

Is there a way to get linear-gradient to work in jQuery? I’m having difficulty getting my code to work getting hidden input values and applying them to a div via inline CSS.

My code:

jQuery(document).ready(function ($) {
    $(document).on( "click", '#update .acf-button-group', function() {
        var color1 = $('#color1 input').val()
        var color2 = $('#color2 input').val()
        $("#output .acf-input").css({"background": "linear-gradient(top, (color1) 0%, (color2) 100%)"});   
    });
});
#output .acf-input {height:100px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#0779bf">
</div>
<div id="color2">
<input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id ="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>
Tags:

2

Answers


  1. 0

    You can use linear-gradient(to top,${color1} 0%, ${color2} 100%) where color1 & color2 will have value of inputs and then set this in your acf-input via css.

    Demo Code :

    jQuery(document).ready(function($) {
  $(document).on("click", '#update', function() {
    var color1 = $('#color1 input').val()
    var color2 = $('#color2 input').val()
    var colors = `linear-gradient(to top,${color1} 0%, ${color2} 100%)`;
    console.log(colors)
    $("#output .acf-input").css({
      "background":colors
    });

  });
});
    #output .acf-input {
  height: 100px
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
  <input type="hidden" name="acf[field_60d4d8ef09c78]" value="#0779bf">
</div>
<div id="color2">
  <input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>
    Login or Signup to reply.
  2. 0

    You need to use to top instead of top.

    Also, you need to pass the variable with ` and ${}.

    Also, $(document).on( "click", '#update .acf-button-group' you should pass a Element $("#update") instead of '#update .acf-button-group'.

    After all fix, it should work.

    jQuery(document).ready(function ($) {
  $(document).on("click", $("#update"), function () {
    var color1 = $("#color1 input").val();
    var color2 = $("#color2 input").val();
    //console.log(`linear-gradient(to top, ${color1} 0%, ${color2} 100%)`);
    $("#output .acf-input").css({
      background: `linear-gradient(to top, ${color1} 0%, ${color2} 100%)`,
    });
  });
});

//
    #output .acf-input {height:100px}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#0779bf">
</div>
<div id="color2">
<input type="hidden" name="acf[field_61f4e8ef1957b]" value="#48a9e4">
</div>
<div id ="output">
  <div class="acf-input">xxxxxx</div>
</div>
<button id="update">Update</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search