Show Color Picker Value Code Within Input Text Field in Wordpress

Posted by Shwan Namiq on Stack Overflow See other posts from Stack Overflow or by Shwan Namiq
Published on 2014-05-31T20:42:04Z Indexed on 2014/05/31 21:27 UTC
Read the original article Hit count: 150

Filed under:
|
|

Hi i have options page for my theme i used color picker jquery plugin in my options page as show in image below. enter image description here

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
}

© Stack Overflow or respective owner

Related posts about Wordpress

Related posts about admin