My knowledge of javascript is quite frankly...almost non existent. I know what it is and I know what it can do but for the greater part I have no clue how to get it to do what I want.
I've spent the past week trying to find an answer on websites. I get lost and I can't find what I need.
What I need is very simple. I know it can be done with javascript and I imagine it is only a few lines of code.
I run a chat room. On our options page there is a drop down menu for possible colors. We want to expand this to allow custom colors...yet allow the presets as well. My solution? Rather than have two independent boxes I realized a rather easy solution...javascript.
I had seen a script once that allowed you to select an option from a drop down menu which then in turn inserted the value of the selection into a text box...that's what I want to do for or options page.
I would like a simple combo box to insert its value into a textinput field when selected. Well, I guess not even its value, I would like it to input the text of the option itself (well, either).
This would allow users to select a preset color or simply select "custom" from the drop down menu (which would insert a value of absolutetly nothing into the text input box and then they could insert their own hex.
HOWEVER, if they wanted a preset all they'd do is select the preset and it would insert the hex into the text input box.
I do believe this is very simple...I just can not for the life of me figure out how. Any help would be GREATLY appreciated.
You are right. This is very easy to do. But straight from the Posting Rules:
Quote:
3) Do your homework first. Only post the part of the script you're having trouble with! There are generally two types of people- ones that simply dump their entire page or problem and expect everyone to spend hours solving everything for them, and those that do their own homework first, and only ask very specific, manageable questions. The later invariably gets more and better responses from others. When you're lazy, do not expect us to be hardworking for you.
As an example, lets say you're working on a long script that uses the "switch" statement of JavaScript, and it's returning errors. You could either:
i) Post the entire script and simply say "Please debug this script for me!"
ii) Or, localize the problem yourself first and post instead "Can someone tell me the syntax of the switch statement in JavaScript?"
The second question will get a LOT more quality responses, as it is concise, manageable, and not overwhelming. Remember, ask for the world, and you'll get nothing. Ask for a little, and you'll get a lot.
Also there is no code even started that we could play with. No one is just going to write something for you! Well I take that back, some times people do when they feel up to the challenge. But you need to at least try. Or show us what you have. I have nothing to base any thing off of. Where it could go? The select box in question? How about a little bit of code?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Colour picker</title>
<script>
// display a chosen colour
function pickColor( strColorCode ) {
document.getElementById("divColorPicker").innerHTML = "";
document.getElementById("txtColorCode").value = strColorCode;
document.getElementById("selColorPicker").selectedIndex = 0;
}
function colorPopup() {
var arrColorParts = new Array("00", "33", "66", "99", "CC", "FF"); // the hexidecimal parts of the colours
var strTemp = '<table cellspacing="1" cellpadding="1" style="border: 1px solid black">\n<tr>\n';
var r, g, b, strColor;
for( g=0; g<arrColorParts.length; g++ ) { // green RGB value part
for( r=0; r<arrColorParts.length; r++ ) { // red RGB value part
for( b=0; b<arrColorParts.length; b++ ) { // blue RGB value part
strColor = "#"+arrColorParts[r]+arrColorParts[g]+arrColorParts[b]; // get the relevant html colour code
strTemp += '<td width="10" style="background-color: ' + strColor + '; border: 1px solid black; cursor: hand;" onclick="pickColor(\'' + strColor + '\');"> </td>\n';
}
}
strTemp += '\n</tr>\n<tr>\n\n';
}
strTemp += '\n</tr>\n</table>';
document.getElementById("divColorPicker").innerHTML = strTemp; // write out table to div
}
function colorSelectEvent( strColorCode ) {
if( strColorCode.length < 1 )
return; // no selected value
else if( strColorCode == "custom" )
colorPopup(); // create the custom colour popup
else
pickColor(strColorCode); // choose the select colour html value
}
function colorSelect() {
var arrSelectColors = new Array(); // array of colour name and html code pairs
arrSelectColors.push(Array("Pink", "#FF69B4"));
arrSelectColors.push(Array("Orange", "#FFA500"));
arrSelectColors.push(Array("Navy", "#000080"));
arrSelectColors.push(Array("Green", "#008000"));
arrSelectColors.push(Array("Darkslategray", "#2F4F4F"));
arrSelectColors.push(Array("Yellow", "#FFFF00"));
var strSelect = '<select name="selColorPicker" onChange="colorSelectEvent(this.value);">\n';
strSelect += '<option value="" selected>Please select a color</option>\n'; // default select value
for( var i=0; i<arrSelectColors.length; i++ ) // loop throught the nominated colours
strSelect += '<option value="' + arrSelectColors[i][1] + '">' + arrSelectColors[i][0] + '</option>\n';
strSelect += '<option value="custom">Custom</option>\n'; // custom option always comes last
strSelect += "</select>\n";
return strSelect;
}
</script>
</head>
<body style="font-family: 'Courier New', Courier, mono; font-size: 12px; color: #000000">
<div style="width: 600px">
<form name="frmColor">
<fieldset>
<legend><strong>Input</strong></legend>
<script>
document.write(colorSelect());
</script>
<div id="divColorPicker"></div>
</fieldset>
<fieldset>
<legend><strong>Output</strong></legend>
Code: <input type="text" name="txtColorCode">
</fieldset>
<br>
</form>
</div>
</body>
</html>
__________________
"Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
-Tommy Cooper
Last edited by martin_narg; 06-03-2005 at 09:10 AM..
Hi mate, first of all I fully agree with SpirtOfGrandeur and this is post is no way meant to demean what he says. In fact, really the only reason I looked at this was to have a bit of a play writing a colour picker that I could use later on, or at least maintain an interest in.
This is script is really not been polished whatsoever. Normally I would do it much much cleaner, but I got it works in opera, firefox and ie. however it's not got the CSS I would normally put in, and as for re-writing the contents of the div using innerHTML *every* time you want to see the custom colours, it's plain inefficient.
BUT, it gives a good idea of what you want and some way for a jumping off point to modify and use as you see fit.
I hope this helps.
m_n
__________________
"Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
-Tommy Cooper
Dont worry about it martin_narg, like i said "Well I take that back, some times people do when they feel up to the challenge." You where just up for the challenge Ehehehehe...
I've spent the past week trying to find an answer on websites. I get lost and I can't find what I need.
Actually...I did research it...for an entire week I was looking for answers. And I found absolutetly NOTHING. Months ago I HAD run across a script and from what I remember it was one of the beginning tutorials...so I figured it would have been something anyone with javascript knowledge would have been able to do in a few minutes...hence why I didn't provide any code...partly because I didn't have any, secondly because I figured the HTML would have been worthless.
I hardly make it a habit of asking for anything from anyone for any of my sites. Honestly if I thought it was more than a minute or two worth of work more than basic javascript stuff I'd have never asked.
__________________
"Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
-Tommy Cooper
var zxcHex='0123456789ABCDEF';
var zxcAdd,zxcSelObj,zxcColObj,zxcVal;
function zxcInitNewColor(sel,tb){
zxcSelObj=document.getElementById(sel);
zxcColObj=document.getElementById(tb);
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
zxcSelObj.options[zxc1].style.backgroundColor=zxcSelObj.options[zxc1].value;
}
}
function zxcNewColor(obj){
if (zxcSelObj.selectedIndex<1){ return; }
zxcVal=zxcSelObj.options[zxcSelObj.selectedIndex].value;
zxcColObj.value=zxcVal;
zxcColObj.style.backgroundColor=zxcVal;
}
function zxcHexCk(){
if (zxcSelObj.selectedIndex<1){ return; }
zxcVal=zxcColObj.value;
if (zxcSelObj.options[zxcSelObj.selectedIndex].value==''){
zxcVal=zxcVal.toUpperCase();
if (zxcVal.charAt(0)=='#'){
zxcVal=zxcVal.substring(1,zxcVal.length);
}
if (zxcVal.length<6){
alert('Six HEX Charactors Required');
return;
}
for (zxc0=0;zxc0<zxcVal.length;zxc0++){
if (!zxcHex.match(zxcVal.charAt(zxc0))){
alert('Only HEX Charactors Allowed');
return;
}
}
zxcVal='#'+zxcVal;
zxcColObj.value=zxcVal;
zxcColObj.style.backgroundColor=zxcVal;
zxcAdd=true;
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
if (zxcSelObj.options[zxc1].value==zxcVal){
zxcAdd=false;
}
}
if (zxcAdd){
zxcSelObj.options[zxcSelObj.options.length]=new Option(zxcVal,zxcVal,true,true);
zxcSelObj.options[zxcSelObj.options.length-1].style.backgroundColor=zxcVal;
zxcAdd=false;
}
alert('Entered HEX Color '+zxcVal);
}
else {
zxcAdd=true;
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
if (zxcSelObj.options[zxc1].value==zxcVal&&!zxcSelObj.options[zxc1].value==''){
zxcAdd=false;
}
}
if (!zxcAdd){
alert('Entered Select Color '+zxcVal);
}
else {
alert('Entered a HEX Color\nor Chose from \'Select a Color\'');
zxcColObj.value='';
}
}
}
Before you post, read our: 
Drop Down Inputs into Text input box
Ehehehehe...
