SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    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 ?

  2. #2
    The doctor is in... silver trophy MarcusJT's Avatar
    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].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?
    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!

  3. #3
    Sultan of Ping jofa's Avatar
    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

  4. #4
    SitePoint Zealot
    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> 
    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 )
    Last edited by odoisc; Oct 21, 2002 at 02:07.

  5. #5
    The doctor is in... silver trophy MarcusJT's Avatar
    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:&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)
    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!

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2001
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it works like I wanted.. Thnx a lot


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •