Live color mixer ?

[odoisc]

Try to imagine this : 3 selectlists (one called "red", another one called "green" and a third one "blue"). Each of them have 6 options (0%,20%,40%,60%,80%,100% -> corresponding with values of 00,33,66,99,cc,ff). Below that is a line of text. Now when you change one of the selectors, the 3 values currently selected will be mixed (put together in "#rrggbb" style) and the line of text below will immediatly get changed into that color, without reloading the page.

Is this possible in javascript+css , and if so : how ?

[MarcusJT]

I'm not going to write the code for you, but this is easily achieved, and it's not much more than what you've already said!!

1) Create your three listboxes with appropriate values from 00 to FF for each option, and each listbox named something sensible (e.g. "listboxRed" for the red one).

2) Add onSelect events to the listboxes, which call a function which does the real work (e.g. onselect="updateColour();")

3) In your new JavaScript function updateColour(), get the current value of each listbox (e.g. var red = listboxRed.options[listboxRed.selectedIndex].value then append them to create an RGB string (e.g. var RGB = "#" + red + green + blue

4) Finally, apply the new colour value to your text (which should be wrapped in a named DIV or SPAN) by manipulating its CSS properties. Alternatively you could alter FONT tags, but I think CSS would be neater.

Naturally, you could also write the value to a hidden field, which could then be submitted or returned to another script. (I suspect you need this for a CMS)

How's that?

[jofa]

Wouldn't it be more cool with three slidebars, instead of selects?
http://www.siteexperts.com/tips/webf...olorslider.asp

[odoisc]

Thanks for the tips, this is as far as I got:

<script language="JavaScript1.2">
<!--
function ColorMix() {

var red = Red.options[Red.selectedIndex].value;
var green = Green.options[Green.selectedIndex].value;
var blue = Blue.options[Blue.selectedIndex].value;

test.style.color = "#" + red + green + blue;
}

-->
</script>

<br>red:
<select name="Red" onselect="ColorMix();">
  <option value="ff">100%</option>
  <option value="cc">75%</option>
  <option value="99">50%</option>
  <option value="66">25%</option>
  <option value="00">0%</option>
</select>
<br>green:
<select name="Green" onselect="ColorMix();">
  <option value="ff">100%</option>
  <option value="cc">75%</option>
  <option value="99">50%</option>
  <option value="66">25%</option>
  <option value="00">0%</option>
</select>
<br>blue:
<select name="Blue" onselect="ColorMix();">
  <option value="ff">100%</option>
  <option value="cc">75%</option>
  <option value="99">50%</option>
  <option value="66">25%</option>
  <option value="00">0%</option>
</select>
</form>

<br>
<div class="test">This color should change</div> 

It looks somehow ok, but it isnt really working yet. I'm still trying to make it work though

And that 3slidebar thingie looks cool indeed, but its a bit too complex for what I need

(edit : ah, yep its for a CMS , although a php one )

[MarcusJT]

My fault, I'm afraid (it was 4am) - it should be the onChange event, not onSelect!

Also, you assigned the CSS class "test" to the DIV instead of naming it "test"!

<script language="JavaScript1.2">
<!--
function ColorMix()
{
var red = Red.options[Red.selectedIndex].value;
var green = Green.options[Green.selectedIndex].value;
var blue = Blue.options[Blue.selectedIndex].value;

var rgb = "#" + red + green + blue;
document.all["test"].style.color = rgb;
}
-->
</script>
<table width="100" border="0" cellspacing="0" cellpadding="0">
	<tr> 
		<td>Red:&nbsp;</td>
		<td><select name="Red" onChange="ColorMix();">
				<option value="ff">100%</option>
				<option value="cc">75%</option>
				<option value="99">50%</option>
				<option value="66">25%</option>
				<option value="00">0%</option>
			</select> </td>
	</tr>
	<tr> 
		<td>Green:&nbsp;</td>
		<td><select name="Green" onChange="ColorMix();">
				<option value="ff">100%</option>
				<option value="cc">75%</option>
				<option value="99">50%</option>
				<option value="66">25%</option>
				<option value="00">0%</option>
			</select></td>
	</tr>
	<tr> 
		<td>Blue:&nbsp;</td>
		<td><select name="Blue" onChange="ColorMix();">
				<option value="ff">100%</option>
				<option value="cc">75%</option>
				<option value="99">50%</option>
				<option value="66">25%</option>
				<option value="00">0%</option>
			</select> </td>
	</tr>
</table>
<div id="test">This color should change</div>

(note that the JavaScript is currently not NS4-compatible)

[odoisc]

Ok, it works like I wanted.. Thnx a lot