Ok I have spent all day on this and I am missing something and just cant figure it out. I am using this simple color picker http://www.dynamicdrive.com/dynamicindex11/colorjack/index.htm
What I am trying to do is update the background color and then the font color and let the user see live results and have the hex color code auto update in the text input boxes. Below is my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Color Picker</title>
<link href="plugin.css" rel="stylesheet" type="text/css" />
<script src="plugin.js" type="text/JavaScript"></script>
</head>
<body>
<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
<div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
<div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
<div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
</div>
<form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
<div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
<div id="Hmodel"></div>
</form>
</div>
<table>
<tr>
<td class="formlabel" align="right" valign="top">
<!-- color box to show background color and font color -->
<div id="currentcolor" style="margin-top:2px;padding:4px 10px 4px 10px;background-color:F1FFCC"><span id="showfontcolor" style="color:">Current Text Color</span></div>
<!-- End color box --></td>
<td valign="top"><table>
<tbody>
<tr>
<td><div class="small">Background Color</div>
<input name="colorcode" id="colorcode" value="" maxlength="199" class="textbox" style="width:80px" type="text">
<a href="javascript:toggle('plugin','colorcode');">Color Picker</a></td>
<td> </td>
<td><div class="small">Text Color</div>
<input name="fontcolor" id="fontcolor" value="" maxlength="199" class="textbox" style="width:80px" type="text">
<a href="javascript:toggle('plugin','fontcolor');">Color Picker</a></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<script type="text/javascript">
//*** CUSTOMIZE mkcolor() function below to perform the desired action when the color picker is being dragged/ used
//*** Parameter "v" contains the latest color being selected
function mkColor(v){
//** In this case, just update DIV with ID="colorbox" so its background color reflects the chosen color
$S('currentcolor').background='#'+v;
$('colorcode').value='#'+v;
}
loadSV(); updateH('F1FFCC');
toggle('plugin');
</script>
</body>
</html>
The problem is that it won't update the inputs colorcode and fontcolor in real time.
So there are several things wrong with your javascript. Below I fixed your code:
function mkColor(v){
var field2update = $('#divUpdateID')[0].innerHTML;
if (field2update=='colorcode') {
$('#currentcolor').background='#'+v;
$('#colorcode').value='#'+v;
} else if (field2update=='fontcolor') {
$('#showfontcolor').color='#'+v;
$('#fontcolor').value='#'+v;
}
}
All your jquery selectors were broken. Also innerHTML is a dom function not a jquery function so it needs to be used on a dom object not a jquery object array.
Below is how you can update those. You will have to figure out where to place it in your code as it's not very clear to me where they should go:
$("#currentcolor").html("The value it needs to be updated with!");
$("#colorcode").value = "Same as above!";
The above updates the background, below will update your fontcolor:
$("#fontcolor").value = "The value you want!";
$("#currentcolor").css("color", "your text color value here!"); //this line updates the color of the text in the `currentcolor` div;
EDIT:
This is a rewrite of the above code and also a change to the plugin that your using:
Change to the plugin:
var type_to_update = ''; //this goes in the global namespace,
...
function toggle(v, type){ //changed to accept which input should be updated
$S(v).display=($S(v).display=='none'?'block':'none');
type_to_update = type; //updating the global variable
}
Change to your code:
function mkColor(v){
if(type_to_update == 'colorcode' || type_to_update == ''){ //default to changing background color if one of the pickers has not been clicked on.
$S('currentcolor').background = "#"+v;
$('colorcode').value = '#'+v;
}else if(type_to_update == 'fontcolor'){
$S('currentcolor').css("color", '#'+v);
$('fontcolor').value = '#'+v;
}
loadSV();
updateH('F1FFCC');
toggle('plugin');
}