Applying a css gradient to an element dynamically in JQuery

Question

My fiddle - http://jsbin.com/jebusoxa/1/edit

I'm making a simple HSL color picker and dynamically applying a gradient to a range input type on dom ready & element on change to update the picker.

// Setup Code Update
$(".cpick-code-hsl").on('change keyup', function() {
  $(this).val( "hsla(" + $(".cpick-hue-text").val() + ", " + $(".cpick-s-text").val() + ", " + $(".cpick-l-text").val() + ", " + $(".cpick-a-text").val() + ")");

  // Apply as body background
  $(".head").css({
    "background": $(".cpick-code-hsl").val()
  });

  $(".cpick-code-rgb").val( $(".head").css("backgroundColor") );

  // Alpha Saturation
  $(".cpick-s").css({
    "background": "linear-gradient(to right, #7f7f80 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
  // Alpha Lightness
  $(".cpick-l").css({
    "background": "linear-gradient(to right, #000000 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%) 50%,#ffffff 100%)"
  });
  // Alpha Preview
  $(".cpick-a").css({
    "background": "linear-gradient(to right, rgba(51,51,51,0) 0%," + "hsl(" + $(".cpick-hue").val() + "," + $(".cpick-s").val() + "%," + $(".cpick-l").val() + "%)" + " 100%)"
  });
});

I came across the Gradientz plugin, but it's not working on Firefox. Does anyone know of a better and easier solution?

That isn't valid JavaScript syntax. Check the developer console. Even if you provide the missing commas, your object would have the same property defined multiple times??? — cookie monster
– cookie monster, Commented Mar 8, 2014 at 17:44
Possible duplicate of Setting multiple style.background values (The title doesn't sound like it, but it's exactly this problem -- and there's an answer there.) — T.J. Crowder
– T.J. Crowder, Commented Mar 8, 2014 at 17:47
why not use something like lea.verou.me/prefixfree to use only one background definition, you can not set multiple background definitions at once with jQuery, you also have to disable the default styling in webkit: jsfiddle.net/JE44r/9, for me it seems like you are reinventing the wheel: 1) enideo.com/code/jquery-colors-pickers-hsl-plugin 2) virtuosoft.eu/code/jquery-colorpickersliders 3) hslpicker.com/#ff1a00 4) bebraw.github.io/colorjoe ... — user753676
– user753676, Commented Mar 8, 2014 at 20:00
Thanks for the links Daniel. Prefix is a whole much better option than preset value mirrors. — Michael Schwartz
– Michael Schwartz, Commented Mar 9, 2014 at 12:07

heymrcarter · Accepted Answer · 2014-03-08 19:45:06Z

1

Do you have access to a stylesheet or a <style> element? It would be much easier, more performant, and result in cleaner markup if you defined a css class, then use jQuery to add that class to your element.

http://jsfiddle.net/he3tw/

answered Mar 8, 2014 at 19:45

heymrcarter

6781 gold badge7 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Applying a css gradient to an element dynamically in 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