SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Live color mixer ?
-
Oct 20, 2002, 14:26 #1
- Join Date
- Dec 2001
- Posts
- 198
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Live color mixer ?
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 ?
-
Oct 20, 2002, 19:58 #2
- Join Date
- Jan 2002
- Location
- London
- Posts
- 3,509
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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].valuethen 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?MarcusJT
- former ASP web developer / former SPF "ASP Guru"
- *very* old blog with some useful ASP code
- Please think, Google, and search these forums before posting!
-
Oct 20, 2002, 23:12 #3
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wouldn't it be more cool with three slidebars, instead of selects?
http://www.siteexperts.com/tips/webf...olorslider.asp
-
Oct 21, 2002, 02:03 #4
- Join Date
- Dec 2001
- Posts
- 198
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the tips, this is as far as I got:
PHP Code:<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>
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)
Last edited by odoisc; Oct 21, 2002 at 02:07.
-
Oct 21, 2002, 05:31 #5
- Join Date
- Jan 2002
- Location
- London
- Posts
- 3,509
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"!
Code:<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: </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: </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: </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>
MarcusJT
- former ASP web developer / former SPF "ASP Guru"
- *very* old blog with some useful ASP code
- Please think, Google, and search these forums before posting!
-
Oct 22, 2002, 00:10 #6
- Join Date
- Dec 2001
- Posts
- 198
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, it works like I wanted.. Thnx a lot
Bookmarks