1
I use wordpress and I need to make this code work. upei it and to using firefox debuger to know where are the errors. It already replaces all $
for jQuery
, but on line 18 he’s saying that jQueryrainbow.slider
is not a function. Detail this code is functional was made by CODEPEN.
jQuery(document).ready(function() {
jQuery.fn.pickify = function() {
return this.each(function() {
jQuerypicker = jQuery(this);
jQueryic0n = jQuerypicker.children('.ic0n');
jQueryinput = jQuerypicker.children('input.change');
jQueryboard = jQuerypicker.children('.board');
jQuerychoice = jQueryboard.children();
jQueryrainbow = jQuerypicker.children('.rainbow');
var colors = jQuerypicker.attr('data-hsv').split(',');
jQuerypicker.data('hsv', {h: colors[0], s: colors[1], v: colors[2]})
var hex = '#'+rgb2hex(hsv2rgb({h: colors[0], s: colors[1], v: colors[2]}));
jQueryinput.val(hex);
jQuery('body').add(jQueryic0n).css('background-color', hex);
// making things happen
jQueryrainbow.slider({
value: colors[0],
min: 0,
max: 360,
slide: function(event, ui) {changeHue(ui.value)},
stop: function() {changeColour(jQuerypicker.data('hsv'), true)}
})
jQuerychoice.draggable({
containment: '.board',
cursor: 'crosshair',
create: function() {jQuerychoice.css({'left': colors[1]*1.8, 'top': 180-colors[2]*1.8});},
drag: function(event, ui) {changeSatVal(ui.position.left, ui.position.top)},
stop: function() {changeColour(jQuerypicker.data('hsv'), true)}
});
jQueryboard.on('click', function(e) {
var left = e.pageX-jQueryboard.offset().left;
var top = e.pageY-jQueryboard.offset().top;
jQuerychoice.css({'left': left, 'top': top});
changeSatVal(left, top);
changeColour(jQuerypicker.data('hsv'), true);
});
// drag var actions
function changeHue(hue) {
jQueryboard.css('background-color', 'hsl('+hue+',100%,50%)');
var hsv = jQuerypicker.data('hsv');
hsv.h = hue;
changeColour(hsv);
}
function changeSatVal(sat,val) {
sat = Math.floor(sat/1.8);
val = Math.floor(100-val/1.8);
var hsv = jQuerypicker.data('hsv');
hsv.s = sat;
hsv.v = val;
changeColour(hsv);
}
// changing the colours
function changeColour(hsv, restyle, hex) {
var rgb = hsv2rgb(hsv);
if (!hex) {var hex = rgb2hex(rgb)}
jQuerypicker.data('hsv', hsv).data('hex', hex).data('rgb', rgb);
jQueryic0n.css('background-color', '#'+hex);
jQueryinput.val('#'+hex);
if (restyle) {
changeStyle(rgb);
}
}
function changeStyle(rgb) {
var rgb = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
jQuery('body').css('background-color', rgb);
}
// input change
jQueryinput.keyup(function(e) {
if (e.which != (37||39)) {
inputChange(jQueryinput.val());
}
});
function inputChange(val) {
var hex = val.replace(/[^A-F0-9]/ig, '');
if (hex.length > 6) {
hex = hex.slice(0,6);
}
jQueryinput.val('#' + hex);
if (hex.length == 6) {
inputColour(hex);
}
}
function inputColour(hex) {
var hsv = hex2hsv(hex);
jQueryic0n.css('background-color', '#'+hex);
jQuerychoice.css({
left: hsv.s*1.8,
top: 180-hsv.v*1.8
});
jQueryrainbow.children().css('left', hsv.h/3.6+'%');
jQueryboard.css('background-color', 'hsl('+hue+',100%,50%)');
changeColour(hsv, true, hex);
}
function hex2hsv(hex) {
var r = parseInt(hex.substring(0,2),16)/255;
var g = parseInt(hex.substring(2,4),16)/255;
var b = parseInt(hex.substring(4,6),16)/255;
var max = Math.max.apply(Math, [r,g,b]);
var min = Math.min.apply(Math, [r,g,b]);
var chr = max-min;
hue = 0;
val = max;
sat = 0;
if (val > 0) {
sat = chr/val;
if (sat > 0) {
if (r == max) {
hue = 60*(((g-min)-(b-min))/chr);
if (hue < 0) {hue += 360;}
} else if (g == max) {
hue = 120+60*(((b-min)-(r-min))/chr);
} else if (b == max) {
hue = 250+60*(((r-min)-(g-min))/chr);
}
}
}
return {h: hue, s: Math.round(sat*100), v: Math.round(val*100)}
}
function hsv2rgb(hsv) {
h = hsv.h;
s = hsv.s;
v = hsv.v;
var r, g, b;
var i;
var f, p, q, t;
h = Math.max(0, Math.min(360, h));
s = Math.max(0, Math.min(100, s));
v = Math.max(0, Math.min(100, v));
s /= 100;
v /= 100;
if(s == 0) {
r = g = b = v;
return {r: Math.round(r*255), g: Math.round(g*255), b: Math.round(b*255)};
}
h /= 60;
i = Math.floor(h);
f = h - i; // factorial part of h
p = v * (1 - s);
q = v * (1 - s * f);
t = v * (1 - s * (1 - f));
switch(i) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
default: r = v; g = p; b = q;
}
return {r: Math.round(r*255), g: Math.round(g*255), b: Math.round(b*255)};
}
function rgb2hex(rgb) {
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return hex(rgb.r) + hex(rgb.g) + hex(rgb.b);
}
});
};
jQuery('.picker').pickify();
});
How do you include this code on your page?
– Caio Felipe Pereira