Search code examples
javascriptjquery-uislideruislidercolor-picker

How to show / hide a colorpicker attached to jQuery slider handle

I want to achieve this :

  1. show the picker on clicking jQuery slider handle
  2. the picker is to be shown adjacent to the current position of slider
  3. hide the picker on clicking anything other than slider handle I want to use this colorpicker. I tried it at my own. I succeeded in showing the colorpicker but failed to hide it.

My code is as follows : 

$(".ui-slider-handle").click(function(e){
    $("#colorpickerDiv").css({"left":e.pageX,"top":e.pageY});
    $("#colorpickerDiv").spectrum("show");
});
$("body").click(function(){
    $("#colorpickerDiv").spectrum("hide");
});
Solution

  • author of the plugin here.

    Here is a working example of what I think you are looking for: http://jsfiddle.net/bgrins/FLBQW/. Your problem may have been caused by an issue from an earlier version, but if you are still having problems and can post a test case on jsFiddle, we should be able to figure it out.