Allow other modules to be notified of change to color [#1061848]

Hi
Simple patch attached that triggers the jQuery change event on the input once the user alters the color in the picker.
Allows other modules to bind to the change event on the hidden input field and hence react to the change in color.
Example listening to change in field

  $('#some-color-field .inner_wrapper .color_picker input').change(function(){
    var clr = $(this).val();
    //do something with clr
  })

Comment	File	Size	Author
	jquery_colorpicker-issue.patch	431 bytes	larowlan

Comments

Comment #1

keesee commented 29 April 2011 at 05:10

** I posted this as a new support issue, but given this patch, I thought you might be able to assist. I apologize for double posting.

Hi there. I have a question and was hoping you might be able to assist me.

I've printed a field for type colorpicker --- field_headcolor
<?php print drupal_render($form['field_headcolor']); ?>

When I do that I get exactly what I expect to see. I get a Jquery colorpicker -- drupal renders it so.


<div class="form-item" id="edit-field-headcolor-0-value-wrapper">
 <label for="edit-field-headcolor-0-value" style="display: inline; ">Color: </label>
 <div id="edit-field-headcolor-0-value-inner_wrapper" class="inner_wrapper" style="background-image: url(http://localhost/sites/all/modules/contrib/jquery_colorpicker/colorpicker/images/select.png); height: 36px; width: 36px; position: relative; "><div class="color_picker" style="background-color: rgb(255, 255, 255); background-image: url(http://localhost/sites/all/modules/contrib/jquery_colorpicker/colorpicker/images/select.png); height: 30px; width: 30px; position: absolute; top: 3px; left: 3px; background-position: 50% 50%; background-repeat: no-repeat no-repeat; "><span class="hash" style="display: none; ">#</span><input type="text" maxlength="6" name="field_headcolor[0][value]" id="edit-field-headcolor-0-value" size="7" value="FFFFFF" class="form-colorpicker" style="display: none; "><div class="description" style="display: none; ">Enter a hexidecimal color value. Enabling javascript will replace this input with a graphical color selector.</div></div></div>
</div>

What I am wanting to do is have this color picker change an element on the page live.
For example the body or the a div with the id of "example" -- div#example

Is there an easy way to do this? I'm new to javascript and this one is abit beyond my skills at the moment.