1

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?

Michael Schwartz
  • 8,153
  • 14
  • 81
  • 144
  • 1
    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 Mar 08 '14 at 17:44
  • 2
    Possible duplicate of [Setting multiple style.background values](http://stackoverflow.com/questions/22244981/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 Mar 08 '14 at 17:47
  • 1
    why not use something like http://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: http://jsfiddle.net/JE44r/9/, for me it seems like you are reinventing the wheel: 1) http://enideo.com/code/jquery-colors-pickers-hsl-plugin/ 2) http://www.virtuosoft.eu/code/jquery-colorpickersliders/ 3) http://hslpicker.com/#ff1a00 4) http://bebraw.github.io/colorjoe/ ... –  Mar 08 '14 at 20:00
  • Thanks for the links Daniel. Prefix is a whole much better option than preset value mirrors. – Michael Schwartz Mar 09 '14 at 12:07

1 Answers1

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/

heymrcarter
  • 678
  • 1
  • 7
  • 20