Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below.
i want when i change
the color from color picker automatically show
the color value code within
the text field.how can do this?
this is
the code within my options page related to appearing
the color picker and text field
function to register
the options setting
function YPE_register_settings_sections_fields() {
register_setting (
'YPE_header_option_group',
'YPE_header_option_name',
'YPE_sanitize_validate_callback'
);
add_settings_section (
'YPE_header_section',
'Header Section',
'YPE_header_section_callback',
'YPE_menu_page_options'
);
add_settings_field (
'YPE_header_bg',
'Header Background',
'YPE_header_bg_callback',
'YPE_menu_page_options',
'YPE_header_section'
);
}
add_action('admin_init', 'YPE_register_settings_sections_fields');
function to appear
the text field and color picker
function YPE_header_bg_callback() {
$YPE_options = get_option('YPE_header_option_name');
$YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : '';
?>
<div class="input-group color-picker">
<input class="form-control" style="width:80px;" name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" />
<span class="input-group-btn">
<div id="colorSelector">
<div nam style="background-color: #0000ff">
</div>
</div>
</span>
</div>
<script>
$("#colorSelector").ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#colorSelector div').css('backgroundColor', '#' + hex);
});
</script>
<?php
}
