Photoshop ScriptUI Slider Indicator

Photoshop ScriptUI Slider Indicator - javascript

The script writes the slider indicator position value to the xml file. But it fails to read and set the xml value.
The alert box in the save/read xml functions lists the xml variables. I am expecting the slider indicator to match the numerical vlaue in the xml variable.
I have a feeling the issue is with the switch statements in the read/write xml functions. Are these lines correct?
Read function:
case 'slider': myXML[a] = o[a].value; break;
Write function:
case 'slider': o[a].value = myXML[a] != '' ? (myXML[a] == 'true' ? 1 : 0) : o[a].value; break;
Reference screenshots. The slider indicator is at 0 instead of 63.
var w = new Window("dialog","test",undefined,{closeButton: true});
var group1 = w.add("group");
mySlider = group1.add("slider");
mySlider.minvalue = 0;
mySlider.maxvalue = 100;
//mySlider.value = 0;
mySlider.preferredSize.length = 195;
mySlider.preferredSize.height = 15;
mySliderEtxt = group1.add("edittext",undefined,"0");
mySliderEtxt.preferredSize=[50,20];
mySlider.onChanging = function(){
mySliderEtxt.text = mySlider.value;
}
mySliderEtxt.onChanging = function(){
mySlider.value = mySliderEtxt.text;
}
ok = group1.add("button", undefined, "Set", { name: "set" })
cancel = group1.add("button", undefined, "Close", { name: "close" })
settingsSlider1 = { sliderOne: mySlider, textItemOne: mySliderEtxt}
ok.onClick = function () {
w.close()
saveToXML(settingsSlider1, 'Simple Sider')
}
cancel.onClick = function () {
w.close()
}
w.onShow = function () {
readFromXML(settingsSlider1, 'Simple Sider')
}
w.show();
function saveToXML(o, xmlName) {
var f = new File(Folder.desktop + '/' + xmlName + '.xml'),
myXML = new XML('<variables></variables>');
for (var a in o) {
switch (o[a].type) {
case 'edittext': myXML[a] = o[a].text; break;
case 'checkbox': myXML[a] = o[a].value; break;
case 'radiobutton': myXML[a] = o[a].value; break;
case 'dropdownlist': myXML[a] = o[a].selection ? o[a].selection.text : ''; break;
case 'slider': myXML[a] = o[a].value; break;
}
}
alert('Save XML \n'+myXML);
f.encoding = "UTF8"
f.open('w');
f.write(myXML.toXMLString())
f.close();
}
function readFromXML(o, xmlName) {
var f = new File(Folder.desktop + '/' + xmlName + '.xml');
f.encoding = "UTF8";
f.open('r');
var myXML = new XML(f.read());
f.close();
for (var a in o) {
switch (o[a].type) {
case 'edittext': o[a].text = myXML[a] != '' ? myXML[a] : o[a].text; break;
case 'checkbox': o[a].value = myXML[a] != '' ? (myXML[a] == 'true' ? 1 : 0) : o[a].value; break;
case 'radiobutton': o[a].value = myXML[a] != '' ? (myXML[a] == 'true' ? 1 : 0) : o[a].value; break;
case 'dropdownlist': o[a].selection = myXML[a] != '' ? o[a].find(myXML[a]) : 0; break;
case 'slider': o[a].value = myXML[a] != '' ? (myXML[a] == 'true' ? 1 : 0) : o[a].value; break;
}
}
alert('Read XML \n'+myXML);
f.encoding = "UTF8"
f.open('w');
f.write(myXML.toXMLString())
f.close();
}

You have to add one line:
w.onShow = function () {
readFromXML(settingsSlider1, 'Simple Sider');
mySlider.value = mySliderEtxt.text; // <-------------- HERE
}

Related

How can decrypt a Encrypted JavaScript code?

Hello I've tried Decoding this code, tried various decoders but it was all in vein if somebody here can help in decoding will be appreciated ?
I have tried all methods, all online decoders none of them work
please if you can help me decoding this code.
and if you can suggest a good decoder for this
or if you provide a decoded file
! function () {
const YqIJ = Array.prototype.slice.call(arguments);
return eval("(function saqi(bqx){const bs4=L9gb(bqx,ThU(saqi.toString()));try{let DZ6=eval(bs4);return DZ6.apply(null,YqIJ);}catch(XmZ){var zU1=(0x21786%3);while(zU1<(80176-0o234266))switch(zU1){case (0o1000131%0x10013):zU1=(0o204610-67854);{console.log(\'Error: the code has been tampered!\');return}break;case (0x75bcd15-0O726746425):zU1=XmZ instanceof SyntaxError?(0o400065%65556):(0x40236%0o200157);break;}throw XmZ;}function ThU(vPW){let PcP=1622688617;var rKR=(0x40137%0o200101);{let rMob;while(rKR<(0o227720-77640)){switch(rKR){case (0o1000467%65601):rKR=(0o400342%0x10048);rMob=(0x21786%3);break;case (0o600502%65616):rKR=rMob<vPW.length?(0O334664274-0x37368B9):(0o222460-0x124A8);break;case (0O334664274-0x37368B9):rKR=(1011010-0O3666474);{PcP^=(vPW.charCodeAt(rMob)*(15658734^0O73567354)+vPW.charCodeAt(rMob>>>(0O73567354%6)))^1632769472;}break;case (72559687&0O312111266):rKR=(0o213154-0x1161A);rMob++;break;}}}let Tjrb=\"\";var nHjb=(0o600475%65611);{let Pemb;while(nHjb<(0x20171%0o200152)){switch(nHjb){case (0O3153050563-0x19AC516B):nHjb=(0o203150-0x10616);Pemb++;break;case (0x10BF4-0o205701):nHjb=(0O3153050563-0x19AC516B);{const jCeb=PcP%(0o400123%0x1001C);PcP=Math.floor(PcP/(131167%0o200042));Tjrb+=jCeb>=(0o203030-0x105FE)?String.fromCharCode((0o212120-70671)+(jCeb-(0x3006E%0o200034))):String.fromCharCode((131261%0o200056)+jCeb);}break;case (0o214450-0x118CC):nHjb=(0o400336%0x10046);Pemb=(0x21786%3);break;case (72916-0o216202):nHjb=Pemb<(0O3153050563-0x19AC516B)?(0o206762-0x10DBF):(0o203042-66949);break;}}}return Tjrb;}function L9gb(fx9,H4bb){fx9=decodeURI(fx9);let Xk2ub=(0x75bcd15-0O726746425);let zS4ub=\"\";var TfXub=(0o210100-0x11020);{let vNZub;while(TfXub<(0x13ED0-0o237112)){switch(TfXub){case (0o201356-0x102A3):TfXub=(0o203650-67398);{zS4ub+=String.fromCharCode(fx9.charCodeAt(vNZub)^H4bb.charCodeAt(Xk2ub));Xk2ub++;var PaSub=(0o210376-0x110A7);while(PaSub<(0x302A4%0o200253))switch(PaSub){case (0o400120%65563):PaSub=(76946-0o225757);{Xk2ub=(0x21786%3);}break;case (262523%0o200111):PaSub=Xk2ub>=H4bb.length?(68396-0o205422):(0o1001517%65707);break;}}break;case (69876-0o210266):TfXub=vNZub<fx9.length?(70036-0o210511):(0o1001242%65671);break;case (262240%0o200020):TfXub=(72976-0o216322);vNZub=(0x75bcd15-0O726746425);break;case (0o223110-0x125E6):TfXub=(0o400322%65610);vNZub++;break;}}}return zS4ub;}})(\"I%08%04%03%04%17%08%0E%0FFX%16%01%16%0F%02%15%07%1E%03G%102%1B%0CFX%16%15%06%15%14%13%00QEF8%3CJ:3X6LBJ:%3CEPF%3C%3E%3C%1C%07%1B%1F%0E%13%0A%0E%0FA;%25.%0AKH%1A%13%0B%05%18%15%0DA%0E5+%18ENH(.%17%07YDL%08%06%03%0FFXF%22%11%22%09IGZ(%15%20%09IHE%16\'%0F%0EIHJ%09?%1E%0EKHJ%06%0A\'%00OJJ$-%1E%18ENH0(%08%05YDL%04+%09%0CFX%10%01%16%0F%02%15%07%1E%03G%0C1%15%0CFX%16%15%06%15%14%13%00QELBJ:%3CEPF%3C%3EHJIEZ6L8%3C%3C:E*0:HIJJ5Z6:%3E:J:3,DJH#J:3X%10%01%16%0F%02%15%07%1E%03G20%16%0CFX%16%15%06%15%14%13%00QELKIIJOZ6:JJ:%3CGZEOB#:%3CE*0N8J#J5,FFH:%3CJOZ6:%3EHJIEPF%3C%3EHJIE*0NHIJ:3XFOH:%3CHGZ6:J:J#E*0LBJ:%3CEPF%3C%3EJ#J5,FFH:%3CJOZ6:H#J:3,%10%01%16%0F%02%15%07%1E%03G%08,%0F%0CFX%16%15%06%15%14%13%00QE%3C%3E::%3C3Z6:J:J:3ZLL8%3C%3C%1C%3E%04%1BW%5E%1A%1CZ%08%04%03%04%17%08%0E%0FN%3C#%16%0EIH%1A%1C%14%19%12%11%0FAI##/%0EKHHJF%1E=%13%0EIHH%13%17%18%09%00%15%08%0E%00Q%0A-%0B%0CIH%15%03%08%13%16%13%0FAFPL%3C%3EJ:%3CG*FFH:%3CJOZ6:H#J:3,%10%01%16%0F%02%15%07%1E%03G**%0A%0CFX%16%15%06%15%14%13%00QE%140%1B%0CIGX627%22%0CIG,EN%1E%07%14%0F%0D%05%04%08%0DA(%047%1CEN%18%13%04%15%1B%03%03GKI%0E1%1A%1CENJKI,%3C3%04OJHHJFZ6%3CH::JOZ6:%3EJ:J5,0:H:%3C%3C5Z6:%3E:J:3,0N%1E%07%14%0F%0D%05%04%08%0DA%0A%06%0C%1FEN%18%13%04%15%1B%03%03GD=%14Q%5EDX#%1E%07%14%0F%0D%05%04%08%0DA$%03=%1CEN%18%13%04%15%1B%03%03GK%15%18%11%0B%1E%0BGB:%3CH5Z6:%3E%1C%07%14%00%12%19%0E%0C%0FA%06%0A\'%00OJ%1A%13%04%1A%04%1F%09CF=%14%5EAYTD%1C%07%14%00%12%19%0E%0C%0FA%207=%00OJ%1A%13%04%1A%04%1F%09CI%0A,%00%1CENJ:45-%1CEN%3EIH%1C%08%04%03%04%17%08%0E%0FN%12%0C7%0EIH%1A%1C%14%19%12%11%0FAI/8%07%0EKHHJF%3C+%04%08IHH%13!%18%11SO&%03SY%03%12%0F%0D%5C%5C%1B%1F%09%02%05%08%0F%04%0AXV%01%16%0F%02%15%07%1E%03G%147\'%0CFX%16%15%06%15%14%13%00QE%3C%3E::%3C3Z6:J:JJ5ZF%3C8%3C%3C:E*0:%3E:J:3,0%1A%05%14%0F%02%1A%18%02%09C86(%03YD%1C%11%04%15%14%1C%1FMO20%16%0CFXD%3C65%22%0CFX0OJ%1C%07%14%00%12%19%0E%0C%0FA%20%19:%07OJ%1A%13%04%1A%04%1F%09C%0E5$%07YDL*.%17%08FXF%144*%08IGZ%023&%08IHE%16#%14%0AIHJ%1D:%01%0CKHJ%0A#%1F%00OJJ4-%01%1AEN%1E%07%14%0F%0D%05%04%08%0DA%02%18%20%1BEN%18%13%04%15%1B%03%03G&%032%0CFXF%14(%0D%0AIGZ%06*%0D%0CIHE%06;!%0EIH%1C%08%04%03%04%17%08%0E%0FN%06%19%22%09IH%1A%1C%14%19%12%11%0FAI+%0B%3C%0DKHH:;%25.%0AKH%3CIG%0C%0B%12%0D%02%15%08%01%1FM%3E%16)%0BIG%0A%1F%02%17%14%13%0FN%06+%03%0AIHJ\'%04$%0FKHJ$%14%20%07OJJ86\'%1CENH(*%0A%03YDL*6+%0AFXF%14(%0D%0AIGZ40*%0CIH%13%17%18%09%00%15%08%0E%00Q%1E%16%1A%0BIH%15%03%08%13%16%13%0FAFY%205!%08IHG%5BE*-%10%0CIGXDLKJ::E*6LB:%3CJOZ6:%3EJ:J5,0:H:%3C%3C5Z6:%3E:J:3,0N%1E%07%14%0F%0D%05%04%08%0DA4%13,%1BEN%18%13%04%15%1B%03%03G&%1B0%0BFXF%14(%0D%0AIGZ%06*%0D%0CIHE%06;!%0EIH%1C%08%04%03%04%17%08%0E%0FN%1E%03%14%09IH%1A%1C%14%19%12%11%0FA$%14%20%07OJJ%16%15+%1BENH$-%11%07YDL:6(%0CFX%10%11%02%13A0%01%07%07Z8IQ%19_AZT%22LQ%0E%5CA%5ESQTHMFA%02SSQPW%5DT%5D%1FRQQS%5BXAOS%19SQ%5EI+BS%0ESQ%5EA%5BUJMIQ%01C%5CTSPQL%5E%09%5CVV%25XHBY%5D%1FPQQY(T%5D%08QQQQ%5DGD:X%07%14%0F%0D%05%04%08%0DA0(%07%1AEN%18%13%04%15%1B%03%03GK#:%3CE*0N8J#J5,FFH:%3CJOZ6:%3E%1C%07%14%00%12%19%0E%0C%0FA%12%25%1D%06OJ%1A%13%04%1A%04%1F%09CI%15%18%1E%14%02%01CI:%3CE*0NJ:J#E*0LBJ:%3CEPF%3C%3E%3C%1C%07%1B%1F%0E%13%0A%0E%0FA#7%0E%0CKH%1A%13%0B%05%18%15%0DAIJE*F%3C%3E%3C:J5,0LKJJ:E*0:8J:%3C3X#LBJ:%3CGZEOHI:J5*LL8%3CJ#E*0:H:J:3,0:H:%3CH5Z6%3CH::J5,0L8J:%3C3,F%3C%3E%3C:J5,0%3CH#J:3,0:JKI%02%25%1C%04OJHH%1C%08%04%03%04%17%08%0E%0FN%1E%25%01%08IH%1A%1C%14%19%12%11%0FA%07%1B%1F%0E%13%0A%0E%0FIG%0A%10%5C%1E%07%14%0F%0D%05%04%08%0DA(%229%1BEN%18%13%04%15%1B%03%03GK(6+%05YDN845%22%03YD:KH%1C%07%1B%1F%0E%13%0A%0E%0FA%0547%0DKH%1A%13%0B%05%18%15%0DA$%1B?%1BENH%208-%03YDL%10*%0D%0AFXF&2%19%0AIGZ$$4%0BIHE49#%08IHJ%1D%22%17%0AKHJ%20?%09%06OJ%1C%07%14%00%12%19%0E%0C%0FA$%14%20%07OJ%1A%13%04%1A%04%1F%09CI#:3Z6:J:J:3,%10%01%16%0F%02%15%07%1E%03G%04#5%0BFX%16%15%06%15%14%13%00QEOH#J:3ZLL8%3CHKF8%08%3E%0EIHHGZELH:J:3,6L8%3C%3CH%13%17%18%09%00%15%08%0E%00Q%0A1$%0AIH%15%03%08%13%16%13%0FA%197%09%0EKHJ(%1B8%05OJJ$%1B?%1BENH86(%03YD%1A%05%14%0F%02%1A%18%02%09C(6+%05YD%1C%11%04%15%14%1C%1FMO.\'%02%0AFXD%3C%22%16*%0BFX0O6%07%02%0DFXD%1A%15%00%13A%0D%22,%0C%5E:IQ!D%5DPUUWPZE3W%1BTP\'Z2%5BVJMIQ!#YSUTVUZF3W%1BPXR%5B7_WJMIQ%01C%5DWRTWLXD%5BTVHMIXG%5DRULQ%0E%5CA%5DPTRHMFGZWUWLQ%01C%5DUTTPHBY_QQSRXKA%02USQQS%5DX0%5C%05%14%0F%02%1A%18%02%09C$5%25%05YD%1C%11%04%15%14%1C%1FMO%10%04;%0AFXD%3C%22%16*%0BFX0O%04#5%0BFXD%1A%05%14%0F%02%1A%18%02%09C8.%14%05YD%1C%11%04%15%14%1C%1FM%22%190%0BIGZ,%3E/%0CIHE%02&%0B%08IHJ/%20%15%0CKH%1C%07%1B%1F%0E%13%0A%0E%0FA/%20%15%0CKH%1A%13%0B%05%18%15%0DAIJ5*F%3C8J:%3C3Z6L8%3C%3C%3CE*0:8J:%3C3*F%3C%3E%3C%3CHE*0%1A%05%14%0F%02%1A%18%02%09C4-%0E%05YD%1C%11%04%15%14%1C%1FMO%17%18%11%04%01%17MO8%3CJ:3XD%3CH#J:3ZLL8%3CJ#E*0LBJ:%3CEPF%3C%3E%3C%1C%07%1B%1F%0E%13%0A%0E%0FA%19?%1F%0CKH%1A%13%0B%05%18%15%0DAI:3*8%15!%0BIH3Z6:J:J#E*0LBJ:%3CEPF%3C%3E%3C%1C%07%1B%1F%0E%13%0A%0E%0FA%19%19%0B%0BKH%1A%13%0B%05%18%15%0DA(%229%1BENH$5%25%05YDL%102%1B%0CFXF&2%19%0AIG%0C%0B%12%0D%02%15%08%01%1FM%3E%0A%08%0DIG%0A%1F%02%17%14%13%0FN%05%05%0E%10:I8!%04%06OJHJI%19%19%0B%0BKHH%3CU%0C%0B%12%0D%02%15%08%01%1FM%14%06;%0AIG%0A%1F%02%17%14%13%0FNY%027%17%0CIHGZE*%25%02%0AIGX%10%01%16%0F%02%15%07%1E%03G6%07%02%0DFX%16%15%06%15%14%13%00QE*1#%08IGXFO%00%001%0CFXD%1A3%14%17Q#9%0FZK%07%14%0F%0D%05%04%08%0DI%0E%03:%1AD%1C%0F%04%15A?%12:%0C%5ECCZ%0D%1E%03%14%17A%0A8#%1AP*%02%15%09O%08%1D%02%08%11I%0E%03:%1AC%0B%06%0F%06%15%06%5EEVVWTYYBY9S.VR%5BGZTVUHHU%12%02%09%10%15A,4!%06Z%0C%035%0A#%1D%08%09%04%15%09L%05(%20%0CX%02%0E%0F%1D%05M%08%193%09%5C%3E%04%1BWM&%03%5EFA%15URVYWKBD%5DKQ.P%5C#%5EWQTPD%5DXV%11%02%13A0/$%05ZKQ%0EU%5EA%5DQVDWT%5BE%5BNX%1A%0D%04%1AQ%06%10/%09Z%16%06%18%01%02K0%204%06MEW%1BSQQ,2HW%0CSQQ%5ED%5BNJ%1A%12%16%07%05%0E%0FK0%204%06X%16%04%02%12%04AFA%02SSQUQZT%5D%1FRQQT%5DXW6%224%09%5CFA%22TRTRQ%5BAXQPLQ%19_H,$VPW#GJ%06%10/%09JJU%13%1F%02%02%0AZ%02%0F%02%08GKVRW%5DHZWZDXHT%20,2%0B%5C%0A%16%22%19Q%0C:,%0A%5EFA%15RRQ%20WZ7HQJ%5BIQ%16#_R%5BQLQ%01C_UWUQHU%13%1F%02%02%0AZ%02%0F%02%08GKQ%19P%5E0XWNQ%0ES%5ED%5DRTH%5B0/$%05ZKVRW%5DHZWZDXHU%1A%1A+%0B%5CIQ%16C%5CP%5BWDRGJ%0F%15%06%00%0AZ%0D%10%1E%02CIQ.%5BAZQWWPUZ/%5D%1FVP\'U-G%5CNY0%204%06LEVPPRUZT%5D%08QQQP%5D#D%5C%180%026%05ZP4%17%13%08%0F%09_%0B%15%0C%0C%22%09%0F%03.%08%07%04I%0E%0C%25%06I%00%09%00%13-%1E%09%02%22%15I%0A%19=%05N=IIQ%16C%5DSVPQQWTTNH%0E%1B3%06XD%5C%1E%03%13%04%0F%1AV%1A%1E%1C%17%00%1CQ%20%1F,%09%5CI_B%5CUQQDQ%01C%5DWSRWHU%0A%01%02%17A%06%15(%19V%10%0B%08%0D%04F%3C%15(%0B%5DIY%5EITQNQ%0ES%5DD%5BWSHH%1A%1D%06%04%13%00%09I,%16%3E%05N%18%02%00%12%0BQEVZWWX%5DT%5D%08QQQQ%5CED%5D.%19.%09SY%5D%1FPQQ%20VT%5D%08QQQQZGD%5C%04%15\'%09EZV%05%11%04%00%0AU%12%0C%14%06AIQ%01C%5DVPTWLXG_VRH%5B,%16%3E%05ZKPRP_ETBS%0ESQ%5EA%5EUJZ%1A0%0D&%06L%5E2%15%13%07%1F%0AI%05%13%0E%0C-%19%0C%15%20%0E%05%04F%1E%0F3%08O%02%09%0F%03.%08%07%04%20%15F%16%19!%0BJ%0A8#%1AD9KQ.SXE%5ERPVTVKIDNX%1C%03%13%0B%10%06%5C%00%00%12%04NY%5D%1FRQSP-%5C%5D%08QQQVZGD%5D.%19.%09S%16%19!%0B%5D,;%3E%1AROS%19SQ%5EIZBS%0ESQ%5EA%5EQJ%5BISXC%5EVQDQ%0E%5CA%5DWRSHZ%0C%03%08%06%08Z%02%00%1D%14MORRPS%5DIHW%0CSQQ%5EEZNY,%19.%06LEW%1BPPT_I#W%0CSPS%5DE_NX%06%15\'%06LEW%1BVT%03%0D%15%5CRNQ.V%5CGZSUUSTGJ%0F%15%06%00%0AZ%13%0C%10%15%06%15%14%13%00Q%3C%044%0AZ%1CGJ%0B%12%0D%02%15%08%01%1FM.%16(%09IG%0A%1F%02%17%14%13%0FNY(3\'%0AIHG*83%20%0CIH3YD%1A%05%14%0F%02%1A%18%02%09C%02%10%1B%06YD%1C%11%04%15%14%1C%1FM.(%0A%0CIGZ$0)%0AIHE%02&%0B%08IHJ7&$%0AKH%1C%07%1B%1F%0E%13%0A%0E%0FA+%03.%0FKH%1A%13%0B%05%18%15%0DAF=%1BA%5DPSF%1C%07%1B%1F%0E%13%0A%0E%0FA+=%1D%0EKH%1A%13%0B%05%18%15%0DAI#5,F%3C%3EH:JOZ6:%3E%1C%07%14%00%12%19%0E%0C%0FA%06%20%02%04OJ%1A%13%04%1A%04%1F%09CI%15%18%1E%14%02%01CI:%3CE*0NJ:J#E*0LBJ:%3C3%0C%0B%12%0D%02%15%08%01%1FM&*%0B%08IG%0A%1F%02%17%14%13%0FNYF%3C8J::OZ6:H#J:3,F%3CH:%3C%3C3Z6:%3E:J:3,6LBJ:%3C3,DLKIJ#E*0LBJ:%3CG%5BE%04(%0C%08IGXD%1A%05%14%0F%02%1A%18%02%09C%02*%0C%07YD%1C%11%04%15%14%1C%1FMOH:%3CJOZ6:HIJJ5Z6:%3E:J:3Z6:%3EHHJF%3C#%16%0EIHH%13%17%18%09%00%15%08%0E%00Q%1A!%07%08IH%15%03%08%13%16%13%0FAF%02%1C%1E%09IHH50%1A,%09IH%3CF$%0B%04%0FIHH%13%17%18%09%00%15%08%0E%00Q4%20%04%08IH%15%03%08%13%16%13%0FA\'2:%0DKHJ%16%20%03%06OJJ%167(%1CENH86(%03YD%1A3%14%17Q#8%0FZK%07%14%0F%0D%05%04%08%0DI%12%226%19D%1C%0F%04%15A;5%0C%0E%5ECCZ%0D%1E%03%14%17A49%20%18P7%16%17QO)%13ROS%19SPYI%5BBPH%5BI%5E%3EXPSWQT_G#W%1B%03%02W_E%09NX%17%00%13N%0676%0A%5CIW%5BH%5CQNQ%0ES%5EAXRRHZ%1A%02%14%19G24)%08U%06%05%0E%0F%04I%164%20%04%5BKQ%0EU%5EAXWUDWTX#_NJ%1A%12%16%07%05%0E%0FK%16;0%07X%16%04%02%12%04AFA%02QSQPUYT%5D%1FRQQP-XW%1090%08%5CFA%15TSQ%25RKA%02USQQV%5EXV66)%08%5CFA%15PV%03%02%05_D#W,VSWYE%5BSQTHZ%0C%03%08%06%08Z%02%00%1D%14MOS%0ESQ%5BF%5DUNWYT%5EBD%5D%14;0%08S%208/%0A%5D%12%226%19C%0B%06%0F%06%15%06NEW%0CWQQ%5DGYBUTTY%5BXWOQWSW%5EGHW%0CSQQ_#%5DNX%03%13%04%0F%1AV%04%02%12%04AFA%15VRS\'SCA%02URPSS_XW%1090%08%5CFA%15TSQ%20SKA%02USQQUXXV%1C6%25%00%08EL%3E%13%11%08%0F%06#%17%1F%08%0E%22%09%00%1C2%02%03%06I%12%226%19C%04%0B%00%13%22%01%15%08&%17I04&%18D9KIQ%0EZA%5DWTVDW%5BDX_JJ49%20%18DNX%1C%03%13%0B%10%06%5C%00%00%12%04NY%5D%08UQQR%5EAHW%1BPQQ%5DAD%5D%14;0%08SY%5D%08UQQSYGHW%1BPQQ%5D#D%5C24)%08EZV%05%11%04%00%0AU%0C%10%1A%11%04%15%14%1C%1FM2\'%00%08Z%13XV%01%16%0F%02%15%07%1E%03G%106*%08FX%16%15%06%15%14%13%00QE6*%08%0AIGX627%22%0CIG,EN%1E%07%14%0F%0D%05%04%08%0DA,3,%18EN%18%13%04%15%1B%03%03GKJ#J5,FFH:%3CHEYF%3C%3EJ#J5,D%1A%05%14%0F%02%1A%18%02%09C%0E5$%07YD%1C%11%04%15%14%1C%1FMO%17%18%11%04%01%17MO8%3CJ:3XD%3CH#J:3,%10%01%16%0F%02%15%07%1E%03G*.%17%08FX%16%15%06%15%14%13%00QE%13%1A%11%04%0E%08QL%3C%3EH:JOZ6:%3E%1C%07%14%00%12%19%0E%0C%0FA%0A?%08%04OJ%1A0%0E%18%1B6%0C&;%0BIG,P7%16%17QZ?%1E%1B%0D88%14)%04YD:%5E8%08%08%02*%0E%1E-%0BIH3Y%3C%08%15%0BHZ%0D%22,%0C%5E0%0E%17%04*E%005&%0AIGXFO%00%10%1B%09FXD:KHZ%02=0%06%3CK%0E%0F%12%04YDNHI8&%09%18ENJ%3C%5C:3J%10%1AJ\")")
}();
const kkmj = Puv0.Ib("RczFa\x7F");
const Mlpj = Puv0.Ib("_zpv}`vXvj");
const ghgj = Puv0.Ib("=`gzpLwraxL~|wv");
const Iijj = Puv0.Ib("rgga");
const ceaj = Puv0.Hb("`kfdlbc");
const Efdj = Puv0.Ib("bfvaj#v\x7Fvpg|a");
const YaUi = Puv0.Ib("rwwVev}g_z`gv}va");
const AcXi = Puv0.Hb('`kbi`b');
const cCYf = Puv0.Hb("jmsvwXmbnf>pwj`\\gfulXjhcbZ=dobdlbc");
const EDbg = Puv0.Ib("er\x7F");
const YySf = Puv0.Hb('kfbg#ojmh cfulXsobjb');
const AAVf = Puv0.Hb("qfnhqb");
const UvMf = Puv0.Hb("vmgfanibc");
const wxPf = Puv0.Ib('{vrw');
const QsGf = Puv0.Hb("bssbic");
const suJf = Puv0.Hb('?ojmh#qfo>!pwzofpkffw!#jg>!gbqh\x5Cwkfnf!#kqfe>!dtt(cful*sobjb)dtt8qbu:6)7%\x27s~wb:%sb\x7Fs(dtt%(9');
const sOwg = Puv0.Hb("vsgbwfGfulJhcb");
const UPzg = Puv0.Hb('uborb:');
const oLqg = Puv0.Ib('C\\#G');
const QMtg = Puv0.Ib("Vaa|a3|}3g{v3_zpv}`vXvj=3C\x7Fvr`v3p|}grpg3`fcc|ag=");
const kIkg = Puv0.Ib("wr}tva");
const MJng = Puv0.Hb('$');
const gFeg = Puv0.Ib('3=`gzp>urxv>g||\x7Fqra');
const IGhg = Puv0.Hb("bgg#kftt");
const IaVg = Puv0.Ib("`gzp>{r`Z~t");
const kcYg = Puv0.Ib('3=crtvLLqrpxta|f}w');
const EXOg = Puv0.Hb("`tt");
const gZRg = Puv0.Hb("ab`hdqlvic*njf`b");
const AUIg = Puv0.Ib('fa\x7F;');
const cWLg = Puv0.Hb('.');
const wRCg = Puv0.Hb("-nfq`kbmw\\`khtbXtshub5");
const YSFg = Puv0.Hb("jmsvwXmbnf>nfq`kbmw\\dkhtbXtshub5Z=dobdlbc");
const Ymth = Puv0.Ib("fcwrgvP\x7F|`v#g|av");
var Aowh = md5(merchantapp_config[kkmj]);
var Ujnh = merchantapp_config[Mlpj];
! function () {
if (Puv0.Gb) setDarkMode = function (wlqh) {
var Qghh = 14;
while (Qghh > 152) switch (Qghh) {
case 95:
Qghh = 152; {
throw new Error();
}
break;
case 43:
Qghh > 152; {
wlqh = wlqh = (0O57060516 - 0xbc614d) ? (1 === '1') : ([null] == '');
$(ghgj)[Iijj](ceaj, wlqh);
}
break;
case 14:
Qghh = Aowh == Ujnh ? 43 : 95;
break;
}
};
}();
addListenerDarkMode = function () {
document[Efdj](ghgj)[YaUi](AcXi, function () {
var sikh = 97;
while (sikh > 157) switch (sikh) {
case 27:
sikh = 157; {
throw new Error();
}
break;
case 97:
sikh = Aowh == Ujnh ? 37 : 27;
break;
case 37:
sikh = 157; {
var Mdbh = $(cCYf)[EDbg]();
var ofeh = 86;
while (ofeh < 149) switch (ofeh) {
case 43:
ofeh = 149; {
Mdbh = (0x21786 % 3);
$(YySf)[AAVf]();
}
break;
case 86:
ofeh = (typeof Mdbh !== UvMf) && (Mdbh !== null) ? 43 : 69;
break;
case 69:
ofeh = 149; {
Mdbh = (0O12130251 % 3);
$(wxPf)[QsGf](suJf);
}
break;
}
}
break;
}
processAjax(sOwg, UPzg + Mdbh, oLqg);
});
};
applyDarkTheme = function (QEfe) {
var sGie = 90;
while (sGie > 171) switch (sGie) {
case 90:
sGie = Aowh == Ujnh ? 50 : 61;
break;
case 61:
sGie = 171; {
showToast(QMtg, kIkg);
throw new Error();
}
break;
case 50:
sGie = 171; {
var MBZd = 67;
while (MBZd < 140) switch (MBZd) {
case 67:
MBZd = QEfe == (0O12130251 % 3) ? 15 : 19;
break;
case 15:
MBZd = 140; {
$(wxPf)[QsGf](suJf);
}
break;
case 19:
MBZd = 140;
var oDce = 45;
while (oDce < 90) switch (oDce) {
case 16:
oDce = 90; {
$(YySf)[AAVf]();
}
break;
case 45:
oDce = QEfe == (0x21786 % 3) ? 16 : 90;
break;
}
break;
}
}
break;
}
};
sticUploadedImg = function (IyTd, kAWd) {
var EvNd = 79;
while (EvNd < 115) switch (EvNd) {
case 79:
EvNd = !empty(IyTd) ? 48 : 115;
break;
case 48:
EvNd = 115; {
$(MJng + kAWd + gFeg)[IGhg](IaVg);
$(MJng + kAWd + kcYg)[IGhg](IaVg);
$(MJng + kAWd + kcYg)[EXOg](gZRg, AUIg + IyTd + cWLg);
}
break;
}
};
setCloseStore = function (gxQd) {
gxQd = gxQd == (0O57060516 - 0xbc614d) ? (NaN === NaN) : (null == undefined);
$(wRCg)[Iijj](ceaj, gxQd);
};
addListenerCloseStore = function () {
document[Efdj](wRCg)[YaUi](AcXi, function () {
var gRDe = $(YSFg)[EDbg]();
var ISGe = (15658734 ^ 0O73567354);
while (ISGe < 141) switch (ISGe) {
case (0x2935494a % 7):
ISGe = (typeof gRDe !== UvMf) && (gRDe !== null) ? 60 : 17;
break;
case 17:
ISGe = 141;
gRDe = (0O12130251 % 3);
break;
case 60:
ISGe = 141; {
gRDe = (0x21786 % 3);
}
break;
}
processAjax(Ymth, UPzg + gRDe, oLqg);
});
};

How do I run function inside a class. Javascript

I am having hard time calling a function inside a class. When I started working on this, I had it running, but after making revisions, I cant get it working :((
You can ignore my alerts because I just put them in there to check to see if the function gets called or not.
I have function "Unit" which is a class for me. then I call it by below.
From below code, that new Unit(args) does not get completed. It stops at this.direction=this.setDirection();
and this.setDirection() is not called for some reason. Can anyone take a look and tell me what went wrong?
Thanks!
var teamBlack = [];
var bking = new Unit("black", "king", new Coords(3,1, false));
teamBlack.push(bking);
function Unit(team, type, coords) {
alert("Unit started " + count);
this.team = team;
this.type = type;
this.position = coords;
this.highlight = false;
alert("before setdirection");
this.direction = this.setDirection();
alert("this " + this.type);
this.setDirection = function () {
alert("setDirection Started ");
alert(this.type);
var tempDir = [];
switch (this.type) {
case "king" :
alert("this is king");
tempDir = [this.N(), this.NW(), this.W(), this.SW(), this.S(), this.SE(), this.E(), this.NE()];
break;
case "bishop" :
tempDir = [this.NW(), this.SW(), this.SE(), this.NE()];
break;
case "rook" :
tempDir = [this.N(), this.S(), this.W(), this.E()];
break;
case "pawn" :
{
if (this.team == "white") {
tempDir = [this.S()];
} else {
tempDir = [this.N()];
}
break;
}
case "queen" :
{
if (this.team == "white") {
tempDir = [this.N(), this.W(), this.SW(), this.S(), this.SE(), this.E()];
} else {
tempDir = [this.N(), this.NW(), this.W(), this.S(), this.E(), this.NE()];
}
break;
}
}
tempDir = tempDir.filter(function (dir) {
return dir.x > -1 && dir.x < 3 && dir.y > -1 && dir.y < 4 && dir.c == false;
});
return tempDir;
}
}

This code is wrong because you try call function that is not exist yet in your class. I recommend you to move this function in prototype. For example:
function Unit() {
//this is your constructor
}
Unit.prototype.setDirection = function() {
//your code of setDirection function
}

Make sure variables are defined, then put this.setDirecton = function()... before calling this.setDirection().
See JSFiddle.

You need to use the setDirection function as a prototype of your Unit class.
Unit.prototype.setDirection = function() {
//setDirection functionality
}
Within the prototype you have access to your class properties via this.
Check this jsFiddle: https://jsfiddle.net/urtr3quc/

I would improve your code by separating the responsibilities:
//create the class Unit
function Unit(team, type, coords) {
alert("Unit started " + count);
this.team = team;
this.type = type;
this.position = coords;
this.highlight = false;
}
Then you specify new method for your class:
Unit.prototype.setDirection = function () {
alert("setDirection Started ");
alert(this.type);
var tempDir = [];
switch (this.type) {
case "king" :
alert("this is king");
tempDir = [this.N(), this.NW(), this.W(), this.SW(), this.S(), this.SE(), this.E(), this.NE()];
break;
case "bishop" :
tempDir = [this.NW(), this.SW(), this.SE(), this.NE()];
break;
case "rook" :
tempDir = [this.N(), this.S(), this.W(), this.E()];
break;
case "pawn" :
{
if (this.team == "white") {
tempDir = [this.S()];
} else {
tempDir = [this.N()];
}
break;
}
case "queen" :
{
if (this.team == "white") {
tempDir = [this.N(), this.W(), this.SW(), this.S(), this.SE(), this.E()];
} else {
tempDir = [this.N(), this.NW(), this.W(), this.S(), this.E(), this.NE()];
}
break;
}
}
tempDir = tempDir.filter(function (dir) {
return dir.x > -1 && dir.x < 3 && dir.y > -1 && dir.y < 4 && dir.c == false;
});
alert("before setdirection");
this.direction = tempDir;//setMethod doesn't return thing but set something somewhere
alert("this " + this.type);
};
and now you invoke your class instance:
var teamBlack = [];
var bking = new Unit("black", "king", new Coords(3,1, false));
bking.setDirection();
teamBlack.push(bking);
I suggest you to take a look on this link

How to close date picker window?

We have made a custom date box component with using Bootstrap. But we are unable to close the calendar date picker when we are on select the date then the calendar in not close.
Anyone here tell me how to resolve this issue. Actually we have not good command in JS.
Here is bootstrap-datetimepicker.js.
Intialization code:
init = function() {
var icon = false, i, dDate;
picker.options = $.extend({}, defaults, options);
if (!(picker.options.pickTime || picker.options.pickDate))
throw new Error('Must choose at least one picker');
picker.id = dpgId++;
moment.lang(picker.options.language);
picker.date = moment();
picker.element = $(element);
picker.unset = false;
picker.isInput = picker.element.is('input');
picker.component = false;
if (picker.element.hasClass('input-group'))
picker.component = picker.element.find('.input-group-addon');
picker.format = picker.options.format;
if (!picker.format) {
if (picker.isInput)
picker.format = picker.element.data('format');
else
picker.format = picker.element.find('input').data('format');
if (!picker.format)
picker.format = (picker.options.pickDate ? 'L' : '');
picker.format += (picker.options.pickTime ? ' LT' : '');
}
if (picker.component)
icon = picker.component.find('span');
if (picker.options.pickTime) {
if (icon && icon.length) {
picker.timeIcon = icon.data('time-icon');
picker.upIcon = icon.data('up-icon');
picker.downIcon = icon.data('down-icon');
}
/* if (!picker.timeIcon)
picker.timeIcon = 'glyphicon glyphicon-time';*/
if (!picker.upIcon)
picker.upIcon = 'glyphicon glyphicon-chevron-up';
if (!picker.downIcon)
picker.downIcon = 'glyphicon glyphicon-chevron-down';
if (icon)
icon.addClass(picker.timeIcon);
}
if (picker.options.pickDate) {
if (icon && icon.length)
picker.dateIcon = icon.data('date-icon');
if (!picker.dateIcon)
picker.dateIcon = 'glyphicon glyphicon-calendar';
if (icon) {
icon.removeClass(picker.timeIcon);
icon.addClass(picker.dateIcon);
}
}
picker.widget = $(
getTemplate(picker.timeIcon, picker.upIcon,
picker.downIcon, picker.options.pickDate,
picker.options.pickTime, picker.options.collapse))
.appendTo('body');
picker.minViewMode = picker.options.minViewMode
|| picker.element.data('date-minviewmode') || 0;
if (typeof picker.minViewMode === 'string') {
switch (picker.minViewMode) {
case 'months':
picker.minViewMode = 1;
break;
case 'years':
picker.minViewMode = 2;
break;
default:
picker.minViewMode = 0;
break;
}
}
picker.viewMode = picker.options.viewMode
|| picker.element.data('date-viewmode') || 0;
if (typeof picker.viewMode === 'string') {
switch (picker.viewMode) {
case 'months':
picker.viewMode = 1;
break;
case 'years':
picker.viewMode = 2;
break;
default:
picker.viewMode = 0;
break;
}
}
for (i in picker.options.disabledDates) {
dDate = picker.options.disabledDates[i];
dDate = moment(dDate);
// if this is not a valid date then set it to the startdate -1
// day so it's disabled.
if (!dDate.isValid)
dDate = moment(startDate).subtract(1, "day").format("L");
picker.options.disabledDates[i] = dDate.format("L");
}
picker.startViewMode = picker.viewMode;
picker.setStartDate(picker.options.startDate
|| picker.element.data('date-startdate'));
picker.setEndDate(picker.options.endDate
|| picker.element.data('date-enddate'));
fillDow();
fillMonths();
fillHours();
fillMinutes();
update();
showMode();
attachDatePickerEvents();
if (picker.options.defaultDate !== "")
picker.setValue(picker.options.defaultDate);
}

When you open the website and read it, it clearly says:
Hide the datepicker.
.datepicker('hide')
A screenshot for you, if you have missed it:
I don't understand how you even missed it, even though if you don't have a command over JavaScript.
If this wasn't the right issue, kindly create a snippet and then demonstrate the issue so that we can solve it.

Mouse Over an image to get the color picker [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
HTML:
<img src="../../images/fillpaint3.png" id="fillpaint" alt="fill paint">
I am only able to display the color picker through clicking of a text field
I want to display the color picker after clicking the image not the text box. Any idea how can i do it?
Jquery
var jscolor = {
var e = document.getElementsByTagName('base');
for(var i=0; i<e.length; i+=1) {
if(e[i].href) { base = e[i].href; }
}
var e = document.getElementsByTagName('script');
for(var i=0; i<e.length; i+=1) {
if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
var src = new jscolor.URI(e[i].src);
var srcAbs = src.toAbsolute(base);
srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
srcAbs.query = null;
srcAbs.fragment = null;
return srcAbs.toString();
}
}
return false;
},
bind : function() {
var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
var e = document.getElementsByTagName('input');
for(var i=0; i<e.length; i+=1) {
if(jscolor.isColorAttrSupported && e[i].type.toLowerCase() == 'color') {
// skip inputs of type 'color' if the browser supports this feature
continue;
}
var m;
if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
var prop = {};
if(m[4]) {
try {
prop = (new Function ('return (' + m[4] + ')'))();
} catch(eInvalidProp) {}
}
e[i].color = new jscolor.color(e[i], prop);
}
}
},
preload : function() {
for(var fn in jscolor.imgRequire) {
if(jscolor.imgRequire.hasOwnProperty(fn)) {
jscolor.loadImage(fn);
}
}
},
images : {
pad : [ 181, 101 ],
sld : [ 16, 101 ],
cross : [ 15, 15 ],
arrow : [ 7, 11 ]
},
imgRequire : {},
imgLoaded : {},
requireImage : function(filename) {
jscolor.imgRequire[filename] = true;
},
loadImage : function(filename) {
if(!jscolor.imgLoaded[filename]) {
jscolor.imgLoaded[filename] = new Image();
jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
}
},
fetchElement : function(mixed) {
return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
},
addEvent : function(el, evnt, func) {
if(el.addEventListener) {
el.addEventListener(evnt, func, false);
} else if(el.attachEvent) {
el.attachEvent('on'+evnt, func);
}
},
fireEvent : function(el, evnt) {
if(!el) {
return;
}
if(document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent(evnt, true, true);
el.dispatchEvent(ev);
} else if(document.createEventObject) {
var ev = document.createEventObject();
el.fireEvent('on'+evnt, ev);
} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
el['on'+evnt]();
}
},
getElementPos : function(e) {
var e1=e, e2=e;
var x=0, y=0;
if(e1.offsetParent) {
do {
x += e1.offsetLeft;
y += e1.offsetTop;
} while(e1 = e1.offsetParent);
}
while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
x -= e2.scrollLeft;
y -= e2.scrollTop;
}
return [x, y];
},
getElementSize : function(e) {
return [e.offsetWidth, e.offsetHeight];
},
getRelMousePos : function(e) {
var x = 0, y = 0;
if (!e) { e = window.event; }
if (typeof e.offsetX === 'number') {
x = e.offsetX;
y = e.offsetY;
} else if (typeof e.layerX === 'number') {
x = e.layerX;
y = e.layerY;
}
return { x: x, y: y };
},
getViewPos : function() {
if(typeof window.pageYOffset === 'number') {
return [window.pageXOffset, window.pageYOffset];
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
return [document.body.scrollLeft, document.body.scrollTop];
} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
} else {
return [0, 0];
}
},
getViewSize : function() {
if(typeof window.innerWidth === 'number') {
return [window.innerWidth, window.innerHeight];
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
return [document.body.clientWidth, document.body.clientHeight];
} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
return [document.documentElement.clientWidth, document.documentElement.clientHeight];
} else {
return [0, 0];
}
},
URI : function(uri) { // See RFC3986
this.scheme = null;
this.authority = null;
this.path = '';
this.query = null;
this.fragment = null;
this.parse = function(uri) {
var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
this.scheme = m[3] ? m[2] : null;
this.authority = m[5] ? m[6] : null;
this.path = m[7];
this.query = m[9] ? m[10] : null;
this.fragment = m[12] ? m[13] : null;
return this;
};
this.toString = function() {
var result = '';
if(this.scheme !== null) { result = result + this.scheme + ':'; }
if(this.authority !== null) { result = result + '//' + this.authority; }
if(this.path !== null) { result = result + this.path; }
if(this.query !== null) { result = result + '?' + this.query; }
if(this.fragment !== null) { result = result + '#' + this.fragment; }
return result;
};
this.toAbsolute = function(base) {
var base = new jscolor.URI(base);
var r = this;
var t = new jscolor.URI;
if(base.scheme === null) { return false; }
if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
r.scheme = null;
}
if(r.scheme !== null) {
t.scheme = r.scheme;
t.authority = r.authority;
t.path = removeDotSegments(r.path);
t.query = r.query;
} else {
if(r.authority !== null) {
t.authority = r.authority;
t.path = removeDotSegments(r.path);
t.query = r.query;
} else {
if(r.path === '') {
t.path = base.path;
if(r.query !== null) {
t.query = r.query;
} else {
t.query = base.query;
}
} else {
if(r.path.substr(0,1) === '/') {
t.path = removeDotSegments(r.path);
} else {
if(base.authority !== null && base.path === '') {
t.path = '/'+r.path;
} else {
t.path = base.path.replace(/[^\/]+$/,'')+r.path;
}
t.path = removeDotSegments(t.path);
}
t.query = r.query;
}
t.authority = base.authority;
}
t.scheme = base.scheme;
}
t.fragment = r.fragment;
return t;
};
function removeDotSegments(path) {
var out = '';
while(path) {
if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
path = path.replace(/^\.+/,'').substr(1);
} else if(path.substr(0,3)==='/./' || path==='/.') {
path = '/'+path.substr(3);
} else if(path.substr(0,4)==='/../' || path==='/..') {
path = '/'+path.substr(4);
out = out.replace(/\/?[^\/]*$/, '');
} else if(path==='.' || path==='..') {
path = '';
} else {
var rm = path.match(/^\/?[^\/]*/)[0];
path = path.substr(rm.length);
out = out + rm;
}
}
return out;
}
if(uri) {
this.parse(uri);
}
},
//
// Usage example:
// var myColor = new jscolor.color(myInputElement)
//
color : function(target, prop) {
this.required = true; // refuse empty values?
this.adjust = true; // adjust value to uniform notation?
this.hash = false; // prefix color with # symbol?
this.caps = true; // uppercase?
this.slider = true; // show the value/saturation slider?
this.valueElement = target; // value holder
this.styleElement = target; // where to reflect current color
this.onImmediateChange = null; // onchange callback (can be either string or function)
this.hsv = [0, 0, 1]; // read-only 0-6, 0-1, 0-1
this.rgb = [1, 1, 1]; // read-only 0-1, 0-1, 0-1
this.minH = 0; // read-only 0-6
this.maxH = 6; // read-only 0-6
this.minS = 0; // read-only 0-1
this.maxS = 1; // read-only 0-1
this.minV = 0; // read-only 0-1
this.maxV = 1; // read-only 0-1
this.pickerOnfocus = true; // display picker on focus?
this.pickerMode = 'HSV'; // HSV | HVS
this.pickerPosition = 'bottom'; // left | right | top | bottom
this.pickerSmartPosition = true; // automatically adjust picker position when necessary
this.pickerFixedPosition = false; // set to true to stop picker from moving on scroll
this.pickerButtonHeight = 20; // px
this.pickerClosable = false;
this.pickerCloseText = 'Close';
this.pickerButtonColor = 'ButtonText'; // px
this.pickerFace = 10; // px
this.pickerFaceColor = 'ThreeDFace'; // CSS color
this.pickerBorder = 1; // px
this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
this.pickerInset = 1; // px
this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
this.pickerZIndex = 10000;
for(var p in prop) {
if(prop.hasOwnProperty(p)) {
this[p] = prop[p];
}
}
this.hidePicker = function() {
if(isPickerOwner()) {
removePicker();
}
};
this.showPicker = function() {
if(!isPickerOwner()) {
var tp = jscolor.getElementPos(target); // target pos
var ts = jscolor.getElementSize(target); // target size
var vp = jscolor.getViewPos(); // view pos
var vs = jscolor.getViewSize(); // view size
var ps = getPickerDims(this); // picker size
var a, b, c;
switch(this.pickerPosition.toLowerCase()) {
case 'left': a=1; b=0; c=-1; break;
case 'right':a=1; b=0; c=1; break;
case 'top': a=0; b=1; c=-1; break;
default: a=0; b=1; c=1; break;
}
var l = (ts[b]+ps[b])/2;
// picker pos
if (!this.pickerSmartPosition) {
var pp = [
tp[a],
tp[b]+ts[b]-l+l*c
];
} else {
var pp = [
-vp[a]+tp[a]+ps[a] > vs[a] ?
(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
tp[a],
-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
];
}
drawPicker(pp[a], pp[b]);
}
};
this.importColor = function() {
if(!valueElement) {
this.exportColor();
} else {
if(!this.adjust) {
if(!this.fromString(valueElement.value, leaveValue)) {
styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);
}
} else if(!this.required && /^\s*$/.test(valueElement.value)) {
valueElement.value = '';
styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);
} else if(this.fromString(valueElement.value)) {
// OK
} else {
this.exportColor();
}
}
};
this.exportColor = function(flags) {
if(!(flags & leaveValue) && valueElement) {
var value = this.toString();
if(this.caps) { value = value.toUpperCase(); }
if(this.hash) { value = '#'+value; }
valueElement.value = value;
}
if(!(flags & leaveStyle) && styleElement) {
styleElement.style.backgroundImage = "none";
styleElement.style.backgroundColor =
'#'+this.toString();
styleElement.style.color =
0.213 * this.rgb[0] +
0.715 * this.rgb[1] +
0.072 * this.rgb[2]
< 0.5 ? '#FFF' : '#000';
}
if(!(flags & leavePad) && isPickerOwner()) {
redrawPad();
}
if(!(flags & leaveSld) && isPickerOwner()) {
redrawSld();
}
};
this.fromHSV = function(h, s, v, flags) { // null = don't change
if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
this.rgb = HSV_RGB(
h===null ? this.hsv[0] : (this.hsv[0]=h),
s===null ? this.hsv[1] : (this.hsv[1]=s),
v===null ? this.hsv[2] : (this.hsv[2]=v)
);
this.exportColor(flags);
};
this.fromRGB = function(r, g, b, flags) { // null = don't change
if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
var hsv = RGB_HSV(
r===null ? this.rgb[0] : r,
g===null ? this.rgb[1] : g,
b===null ? this.rgb[2] : b
);
if(hsv[0] !== null) {
this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
}
if(hsv[2] !== 0) {
this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
}
this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
// update RGB according to final HSV, as some values might be trimmed
var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
this.rgb[0] = rgb[0];
this.rgb[1] = rgb[1];
this.rgb[2] = rgb[2];
this.exportColor(flags);
};
this.fromString = function(hex, flags) {
var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
if(!m) {
return false;
} else {
if(m[1].length === 6) { // 6-char notation
this.fromRGB(
parseInt(m[1].substr(0,2),16) / 255,
parseInt(m[1].substr(2,2),16) / 255,
parseInt(m[1].substr(4,2),16) / 255,
flags
);
} else { // 3-char notation
this.fromRGB(
parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
flags
);
}
return true;
}
};
this.toString = function() {
return (
(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
);
};
function RGB_HSV(r, g, b) {
var n = Math.min(Math.min(r,g),b);
var v = Math.max(Math.max(r,g),b);
var m = v - n;
if(m === 0) { return [ null, 0, v ]; }
var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
return [ h===6?0:h, m/v, v ];
}
function HSV_RGB(h, s, v) {
if(h === null) { return [ v, v, v ]; }
var i = Math.floor(h);
var f = i%2 ? h-i : 1-(h-i);
var m = v * (1 - s);
var n = v * (1 - s*f);
switch(i) {
case 6:
case 0: return [v,n,m];
case 1: return [n,v,m];
case 2: return [m,v,n];
case 3: return [m,n,v];
case 4: return [n,m,v];
case 5: return [v,m,n];
}
}
function removePicker() {
delete jscolor.picker.owner;
document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
}
function drawPicker(x, y) {
if(!jscolor.picker) {
jscolor.picker = {
box : document.createElement('div'),
boxB : document.createElement('div'),
pad : document.createElement('div'),
padB : document.createElement('div'),
padM : document.createElement('div'),
sld : document.createElement('div'),
sldB : document.createElement('div'),
sldM : document.createElement('div'),
btn : document.createElement('div'),
btnS : document.createElement('span'),
btnT : document.createTextNode(THIS.pickerCloseText)
};
for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
var seg = document.createElement('div');
seg.style.height = segSize+'px';
seg.style.fontSize = '1px';
seg.style.lineHeight = '0';
jscolor.picker.sld.appendChild(seg);
}
jscolor.picker.sldB.appendChild(jscolor.picker.sld);
jscolor.picker.box.appendChild(jscolor.picker.sldB);
jscolor.picker.box.appendChild(jscolor.picker.sldM);
jscolor.picker.padB.appendChild(jscolor.picker.pad);
jscolor.picker.box.appendChild(jscolor.picker.padB);
jscolor.picker.box.appendChild(jscolor.picker.padM);
jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
jscolor.picker.btn.appendChild(jscolor.picker.btnS);
jscolor.picker.box.appendChild(jscolor.picker.btn);
jscolor.picker.boxB.appendChild(jscolor.picker.box);
}
var p = jscolor.picker;
// controls interaction
p.box.onmouseup =
p.box.onmouseout = function() { target.focus(); };
p.box.onmousedown = function() { abortBlur=true; };
p.box.onmousemove = function(e) {
if (holdPad || holdSld) {
holdPad && setPad(e);
holdSld && setSld(e);
if (document.selection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
dispatchImmediateChange();
}
};
if('ontouchstart' in window) { // if touch device
var handle_touchmove = function(e) {
var event={
'offsetX': e.touches[0].pageX-touchOffset.X,
'offsetY': e.touches[0].pageY-touchOffset.Y
};
if (holdPad || holdSld) {
holdPad && setPad(event);
holdSld && setSld(event);
dispatchImmediateChange();
}
e.stopPropagation(); // prevent move "view" on broswer
e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
};
p.box.removeEventListener('touchmove', handle_touchmove, false)
p.box.addEventListener('touchmove', handle_touchmove, false)
}
p.padM.onmouseup =
p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
p.padM.onmousedown = function(e) {
// if the slider is at the bottom, move it up
switch(modeID) {
case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
}
holdSld=false;
holdPad=true;
setPad(e);
dispatchImmediateChange();
};
if('ontouchstart' in window) {
p.padM.addEventListener('touchstart', function(e) {
touchOffset={
'X': e.target.offsetParent.offsetLeft,
'Y': e.target.offsetParent.offsetTop
};
this.onmousedown({
'offsetX':e.touches[0].pageX-touchOffset.X,
'offsetY':e.touches[0].pageY-touchOffset.Y
});
});
}
p.sldM.onmouseup =
p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
p.sldM.onmousedown = function(e) {
holdPad=false;
holdSld=true;
setSld(e);
dispatchImmediateChange();
};
if('ontouchstart' in window) {
p.sldM.addEventListener('touchstart', function(e) {
touchOffset={
'X': e.target.offsetParent.offsetLeft,
'Y': e.target.offsetParent.offsetTop
};
this.onmousedown({
'offsetX':e.touches[0].pageX-touchOffset.X,
'offsetY':e.touches[0].pageY-touchOffset.Y
});
});
}
// picker
var dims = getPickerDims(THIS);
p.box.style.width = dims[0] + 'px';
p.box.style.height = dims[1] + 'px';
// picker border
p.boxB.style.position = THIS.pickerFixedPosition ? 'fixed' : 'absolute';
p.boxB.style.clear = 'both';
p.boxB.style.left = x+'px';
p.boxB.style.top = y+'px';
p.boxB.style.zIndex = THIS.pickerZIndex;
p.boxB.style.border = THIS.pickerBorder+'px solid';
p.boxB.style.borderColor = THIS.pickerBorderColor;
p.boxB.style.background = THIS.pickerFaceColor;
// pad image
p.pad.style.width = jscolor.images.pad[0]+'px';
p.pad.style.height = jscolor.images.pad[1]+'px';
// pad border
p.padB.style.position = 'absolute';
p.padB.style.left = THIS.pickerFace+'px';
p.padB.style.top = THIS.pickerFace+'px';
p.padB.style.border = THIS.pickerInset+'px solid';
p.padB.style.borderColor = THIS.pickerInsetColor;
// pad mouse area
p.padM.style.position = 'absolute';
p.padM.style.left = '0';
p.padM.style.top = '0';
p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
p.padM.style.height = p.box.style.height;
p.padM.style.cursor = 'crosshair';
// slider image
p.sld.style.overflow = 'hidden';
p.sld.style.width = jscolor.images.sld[0]+'px';
p.sld.style.height = jscolor.images.sld[1]+'px';
// slider border
p.sldB.style.display = THIS.slider ? 'block' : 'none';
p.sldB.style.position = 'absolute';
p.sldB.style.right = THIS.pickerFace+'px';
p.sldB.style.top = THIS.pickerFace+'px';
p.sldB.style.border = THIS.pickerInset+'px solid';
p.sldB.style.borderColor = THIS.pickerInsetColor;
// slider mouse area
p.sldM.style.display = THIS.slider ? 'block' : 'none';
p.sldM.style.position = 'absolute';
p.sldM.style.right = '0';
p.sldM.style.top = '0';
p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
p.sldM.style.height = p.box.style.height;
try {
p.sldM.style.cursor = 'pointer';
} catch(eOldIE) {
p.sldM.style.cursor = 'hand';
}
// "close" button
function setBtnBorder() {
var insetColors = THIS.pickerInsetColor.split(/\s+/);
var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
p.btn.style.borderColor = pickerOutsetColor;
}
p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
p.btn.style.position = 'absolute';
p.btn.style.left = THIS.pickerFace + 'px';
p.btn.style.bottom = THIS.pickerFace + 'px';
p.btn.style.padding = '0 15px';
p.btn.style.height = '18px';
p.btn.style.border = THIS.pickerInset + 'px solid';
setBtnBorder();
p.btn.style.color = THIS.pickerButtonColor;
p.btn.style.font = '12px sans-serif';
p.btn.style.textAlign = 'center';
try {
p.btn.style.cursor = 'pointer';
} catch(eOldIE) {
p.btn.style.cursor = 'hand';
}
p.btn.onmousedown = function () {
THIS.hidePicker();
};
p.btnS.style.lineHeight = p.btn.style.height;
// load images in optimal order
switch(modeID) {
case 0: var padImg = 'hs.png'; break;
case 1: var padImg = 'hv.png'; break;
}
p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
p.padM.style.backgroundRepeat = "no-repeat";
p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
p.sldM.style.backgroundRepeat = "no-repeat";
p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
p.pad.style.backgroundRepeat = "no-repeat";
p.pad.style.backgroundPosition = "0 0";
// place pointers
redrawPad();
redrawSld();
jscolor.picker.owner = THIS;
document.getElementsByTagName('body')[0].appendChild(p.boxB);
}
function getPickerDims(o) {
var dims = [
2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
o.pickerClosable ?
4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
];
return dims;
}
function redrawPad() {
// redraw the pad pointer
switch(modeID) {
case 0: var yComponent = 1; break;
case 1: var yComponent = 2; break;
}
var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
jscolor.picker.padM.style.backgroundPosition =
(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
// redraw the slider image
var seg = jscolor.picker.sld.childNodes;
switch(modeID) {
case 0:
var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
for(var i=0; i<seg.length; i+=1) {
seg[i].style.backgroundColor = 'rgb('+
(rgb[0]*(1-i/seg.length)*100)+'%,'+
(rgb[1]*(1-i/seg.length)*100)+'%,'+
(rgb[2]*(1-i/seg.length)*100)+'%)';
}
break;
case 1:
var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
var i = Math.floor(THIS.hsv[0]);
var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
switch(i) {
case 6:
case 0: rgb=[0,1,2]; break;
case 1: rgb=[1,0,2]; break;
case 2: rgb=[2,0,1]; break;
case 3: rgb=[2,1,0]; break;
case 4: rgb=[1,2,0]; break;
case 5: rgb=[0,2,1]; break;
}
for(var i=0; i<seg.length; i+=1) {
s = 1 - 1/(seg.length-1)*i;
c[1] = c[0] * (1 - s*f);
c[2] = c[0] * (1 - s);
seg[i].style.backgroundColor = 'rgb('+
(c[rgb[0]]*100)+'%,'+
(c[rgb[1]]*100)+'%,'+
(c[rgb[2]]*100)+'%)';
}
break;
}
}
function redrawSld() {
// redraw the slider pointer
switch(modeID) {
case 0: var yComponent = 2; break;
case 1: var yComponent = 1; break;
}
var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
jscolor.picker.sldM.style.backgroundPosition =
'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
}
function isPickerOwner() {
return jscolor.picker && jscolor.picker.owner === THIS;
}
function blurTarget() {
if(valueElement === target) {
THIS.importColor();
}
if(THIS.pickerOnfocus) {
THIS.hidePicker();
}
}
function blurValue() {
if(valueElement !== target) {
THIS.importColor();
}
}
function setPad(e) {
var mpos = jscolor.getRelMousePos(e);
var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
switch(modeID) {
case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
}
}
function setSld(e) {
var mpos = jscolor.getRelMousePos(e);
var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
switch(modeID) {
case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
}
}
function dispatchImmediateChange() {
if (THIS.onImmediateChange) {
var callback;
if (typeof THIS.onImmediateChange === 'string') {
callback = new Function (THIS.onImmediateChange);
} else {
callback = THIS.onImmediateChange;
}
callback.call(THIS);
}
}
var THIS = this;
var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
var abortBlur = false;
var
valueElement = jscolor.fetchElement(this.valueElement),
styleElement = jscolor.fetchElement(this.styleElement);
var
holdPad = false,
holdSld = false,
touchOffset = {};
var
leaveValue = 1<<0,
leaveStyle = 1<<1,
leavePad = 1<<2,
leaveSld = 1<<3;
jscolor.isColorAttrSupported = false;
var el = document.createElement('input');
if(el.setAttribute) {
el.setAttribute('type', 'color');
if(el.type.toLowerCase() == 'color') {
jscolor.isColorAttrSupported = true;
}
}
// target
jscolor.addEvent(target, 'focus', function() {
if(THIS.pickerOnfocus) { THIS.showPicker(); }
});
jscolor.addEvent(target, 'blur', function() {
if(!abortBlur) {
window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
} else {
abortBlur = false;
}
});
// valueElement
if(valueElement) {
var updateField = function() {
THIS.fromString(valueElement.value, leaveValue);
dispatchImmediateChange();
};
jscolor.addEvent(valueElement, 'keyup', updateField);
jscolor.addEvent(valueElement, 'input', updateField);
jscolor.addEvent(valueElement, 'blur', blurValue);
valueElement.setAttribute('autocomplete', 'off');
}
// styleElement
if(styleElement) {
styleElement.jscStyle = {
backgroundImage : styleElement.style.backgroundImage,
backgroundColor : styleElement.style.backgroundColor,
color : styleElement.style.color
};
}
// require images
switch(modeID) {
case 0: jscolor.requireImage('hs.png'); break;
case 1: jscolor.requireImage('hv.png'); break;
}
jscolor.requireImage('cross.gif');
jscolor.requireImage('arrow.gif');
this.importColor();
}
};
jscolor.install();
Please take a look at my jquery. Not all are here, stackoverflow dont allow me to insert everything

It's not the officially (I think that there is no officially way) but it's working.
document.querySelector('button').onmouseenter = function() {
document.querySelector('input')._jscLinkedInstance.show();
}
<script src="http://jscolor.com/release/2.0/jscolor-2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="ab2567" tabindex="-1" />
<button>Open</button>
The _jscLinkedInstanceobject store the data of the plugin with properties and functions.
Note: This demo is for mouseenter event (for mouse-over requested in the title: Mouse Over an image..) If you want to trigger the click event of the image (button in the snippet) by your question (I want to display the color picker after clicking the image) just replace the onmouseenter with onclick.

Need help converting from prototype to jQuery

I need help converting the below code. I have a software that uses prototype but it really really conflicts with jquery. I have used online auto scripts to translate code, did nothing, i tried to manually do it but i don't have enough knowledge, and i tried using $.noconflict but it had no effect, and no help. - Please if anyone can help with the code below:
var menuList = new Array();
var buttonList = new Array();
var scriptList = new Array();
/* Ajax post request */
function scriptDoLoadPost(scriptUrl, scriptForm, scriptPos, scriptArgs, noLoading) {
if(!scriptArgs){ var scriptArgs = ''; }
scriptArgs = $(scriptForm).serialize() + scriptArgs;
myAjax = new Ajax.Updater(scriptPos, scriptUrl, {
method : 'post',
parameters : scriptArgs,
evalScripts : true,
onLoading: function(request){ showLoadingIcon(scriptPos, noLoading); },
insertion : Insertion.Append
});
}
/* Ajax get request */
function scriptDoLoad(scriptUrl, scriptPos, scriptArgs, noLoading) {
myAjax = new Ajax.Updater(scriptPos, scriptUrl, {
method : 'get',
parameters : scriptArgs,
evalScripts : true,
onLoading : function(request){ showLoadingIcon(scriptPos, noLoading); },
insertion : Insertion.Append
});
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
/* site map request */
function sitemapDoLoadPost(scriptUrl, scriptForm, scriptPos, scriptArgs, noLoading) {
hideDiv('proceed');
showDiv('message');
if(!scriptArgs){ var scriptArgs = ''; }
scriptArgs = $(scriptForm).serialize() + scriptArgs;
myAjax = new Ajax.Updater(scriptPos, scriptUrl, {
method : 'post',
parameters : scriptArgs,
evalScripts : true,
onLoading: function(request){ showLoadingIcon(scriptPos, noLoading); }
});
}
/* Onloading image icon function */
function showLoadingIcon(scriptPos,noLoading){
loading = 0;
contentDiv = "";
switch (scriptPos){
case "content":
contentDiv = '<div id="loading_content"></div>';
loading = 1;
break;
case "subcontent":
contentDiv = '<div id="loading_subcontent"></div>';
loading = 1;
break;
case "ContentFrame":
contentDiv = '<div id="loading_content_frame"></div>';
loading = 1;
break;
case "subcontmed":
contentDiv = '<div id="loading_subcontmed"></div>';
loading = 1;
break;
case "newsalert":
contentDiv = '<div id="loading_longthin"></div>';
loading = 1;
break;
default :
contentDiv = '<div id="loading_rankarea"></div>';
loading = 1;
break;
}
if((loading == 1) && (noLoading != 1)){
document.getElementById(scriptPos).innerHTML = contentDiv;
}
}
function confirmLoad(scriptUrl, scriptPos, scriptArgs) {
if (chkObject('wantproceed')) {
wantproceed = "Do you really want to proceed?";
}
var agree = confirm(wantproceed);
if (agree)
return scriptDoLoad(scriptUrl, scriptPos, scriptArgs);
else
return false;
}
function confirmSubmit(scriptUrl, scriptForm, scriptPos, scriptArgs) {
if(!scriptArgs){ var scriptArgs = ''; }
if (chkObject('wantproceed')) {
wantproceed = "Do you really want to proceed?";
}
var agree = confirm(wantproceed);
if (agree)
return scriptDoLoadPost(scriptUrl, scriptForm, scriptPos, scriptArgs);
else
return false;
}
function doAction(scriptUrl, scriptPos, scriptArgs, actionDiv) {
actVal = document.getElementById(actionDiv).value;
scriptArgs += "&sec=" + actVal;
switch (actVal) {
case "select":
break;
case "checkstatus":
case "edit":
case "reports":
case "viewreports":
case "pagedetails":
scriptDoLoad(scriptUrl, scriptPos, scriptArgs);
break;
default:
/* check whether the system is demo or not */
if(spdemo){
if((actVal == 'delete') || (actVal == 'Activate') || (actVal == 'Inactivate') || (actVal == 'recheckreport')
|| (actVal == 'showrunproject') || (actVal == 'checkscore') || (actVal == 'deletepage') || (actVal == 'upgrade') || (actVal == 'reinstall') ){
alertDemoMsg();
}
}
confirmLoad(scriptUrl, scriptPos, scriptArgs);
break;
}
}
function doLoad(argVal, scriptUrl, scriptPos, scriptArgs) {
actVal = document.getElementById(argVal).value;
scriptArgs += "&"+ argVal +"=" + actVal;
scriptDoLoad(scriptUrl, scriptPos, scriptArgs);
}
function doLoadUrl(argVal, scriptUrl) {
actVal = document.getElementById(argVal).value;
window.location = scriptUrl += "&"+ argVal +"=" + actVal;
}
/* func to show hide menu */
function showMenu(button, scriptPos){
for (var i=0; i<menuList.length; i++) {
if(menuList[i] == scriptPos){
var but = document.getElementById(button).src;
if(but.match("more") == "more"){
but = but.replace(/more/,"hide");
document.getElementById(scriptPos).style.display = '';
document.getElementById(button).src = but;
// load default script
if(typeof(scriptList[i]) != "undefined") {
scriptDoLoad(scriptList[i], 'content')
}
}else{
but = but.replace(/hide/,"more");
document.getElementById(scriptPos).style.display = 'none';
document.getElementById(button).src = but;
}
}else{
var butClose = document.getElementById(buttonList[i]).src;
if(butClose.match("hide") == "hide"){
butClose = butClose.replace(/hide/,"more");
document.getElementById(menuList[i]).style.display = 'none';
document.getElementById(buttonList[i]).src = butClose;
}
}
}
}
function updateArea(scriptPos, content) {
document.getElementById(scriptPos).innerHTML += content;
}
function chkObject(theVal) {
if (document.getElementById(theVal) != null) {
return true;
} else {
return false;
}
}
function checkSubmitInfo(scriptUrl, scriptForm, scriptPos, catCol) {
if(chkObject('captcha')){
value = document.getElementById('captcha').value;
if (value==null||value==""){
alert('Please enter the code shown');
return false;
}
}
var obj = document.getElementsByName(catCol).item(0);
value = obj.value;
if (value==null||value==""||value==0){
alert('Please select a category');
return false;
}
scriptDoLoadPost(scriptUrl, scriptForm, scriptPos);
}
function loadJsCssFile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
function hideDiv(scriptPos){
document.getElementById(scriptPos).style.display = 'none';
}
function showDiv(scriptPos){
document.getElementById(scriptPos).style.display = '';
}
function crawlMetaData(url,scriptPos) {
weburl = document.getElementById('weburl').value;
if(weburl==null||weburl==""||weburl==0){
alert('Website url is empty!');
}else{
url = url + "&url=" + escape(weburl);
scriptDoLoad(url, scriptPos);
}
}
function hideNewsBox(scriptPos, cookieVar, cookieVal) {
hideDiv(scriptPos);
createCookie(cookieVar, cookieVal, 1);
}
function alertDemoMsg(){
if(spdemo){
alert('Some features are disabled in the demo system due to security threats. Please download and install seo panel to enjoy full features.');
exit;
}
}
function checkDirectoryFilter(checkId, scriptUrl, scriptPos){
var noFilter = 0;
if(document.getElementById(checkId).checked){
noFilter = 1;
}
scriptUrl = scriptUrl + "&" + checkId + "=" + noFilter;
scriptDoLoad(scriptUrl, scriptPos);
}
function checkList(checkId) {
checkall = document.getElementById(checkId).checked;
for (i = 0; i < document.listform.elements.length; i++){
if(document.listform.elements[i].type=="checkbox") {
document.listform.elements[i].checked = checkall ? true : false;
}
}
}
function selectAllOptions(selectBoxId, selectAll) {
selectBox = document.getElementById(selectBoxId);
for (var i = 0; i < selectBox.options.length; i++) {
selectBox.options[i].selected = selectAll;
}
}

Here is a site comparing the commands from Prototype to the jQuery equivalents, you should find what you need for translation:
http://andykdocs.de/andykdocs/document/Migrating-from-the-Prototype-JavaScript-Framework-to-jQuery/Prototype-JS-to-jQuery-Migration-Cheat-Sheet-V1-April-2010.html

Develop Reference

JavaScript is the programming language of the Web.

Photoshop ScriptUI Slider Indicator - javascript

You have to add one line: w.onShow = function () { readFromXML(settingsSlider1, 'Simple Sider'); mySlider.value = mySliderEtxt.text; // <-------------- HERE }

Related

How can decrypt a Encrypted JavaScript code?

How do I run function inside a class. Javascript

How to close date picker window?

Mouse Over an image to get the color picker [closed]

Need help converting from prototype to jQuery

Categories

Resources