Не знаю поможет ли, но строчку
cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),
надо заменить на
var cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),
upd:
Ответ на второй комментарий:
Да, ведь за пределами замыкания, statuscolor не определен.
Вообще, у меня смутное сомнение, что тут слишком много всё завязоно на id, и это плохо. Чувствую, что при закрытии тултипа эти айди не удаляются и колор-пиккер при инициализации заново их создает. Лучше всё на классы переделать.
Самый непонятный момент это с тем откуда берется элемент куда вставляется пиккер. Это title который? При закрытии пиккера он удаляется? Элементы #slide и #picker находятся в нем?
хтмла бы, или пример в codepen.io
(function(){
var statusColorElement = undefined;
var slide = document.getElementById('slide');
var picker = document.getElementById('picker');
var slideIndicator = document.getElementById('slide-indicator');
var pickerIndicator = document.getElementById('picker-indicator');
var colorInput = document.getElementById('color');
cp = ColorPicker(slide, picker, function(hex, hsv, rgb, mousePicker, mouseSlide) {
ColorPicker.positionIndicators(slideIndicator, pickerIndicator, mouseSlide, mousePicker);
if(statusColorElement){
$(statusColorElement).css('backgroundColor', hex);
colorInput.value = hex;
}
});
$('.color-status').bind('click', function (event) {
// Получаем ID блока, который нужно показать
var title = $(this).data("target");
var statuscolor = $(this).data("statuscolor");
statusColorElement = $('#status-id-'+statuscolor);
// Показываем блок
$(this).after($(title));
$(title).slideDown(500);
return '';
});
})()