farbtastic with wordpress help.

farbtastic with wordpress help.

hello i am very new to javascript and jquery.

i am working on a wordpress theme right now and would like to give users the option to choose there own colours for specified elements of the site (heading tags, backgrounds, etc)

i have chosen to use farbtastic as it seems the best and wordpress already includes it.

so i have my option page, and have the colour picker working for the first option, and i can retrieve the first option fine.

but every colour picker i add after that is still linked to the first one???

i know it is something to do with a .linkto function, but i have pretty much copied and pasted the java and i am unsure what i need to do.

could someone point me in the right direction??

heres the code

<div class="wrap">
<?php screen_icon(); ?>
<?php echo "<h2>" . __( 'Colour Options', 'colour' ) . "</h2>"; ?>
<form enctype="multipart/form-data" name="form1" method="post" action="<?php echo esc_attr( str_replace( '~', '~', $_SERVER['REQUEST_URI'] ) ); ?>">
<?php settings_fields('colourops'); ?>
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><?php _e( 'Background Color:', 'p2' ) ?></th>
<td>
<input id="pickcolor" type="button" class="button" name="pickcolor" value="<?php _e( 'Pick a Color', 'colour' ) ?> "/>
<input name="background_color_hex" id="background_color_hex" type="text" value="<?php esc_attr_e( $background_color ); ?>" style="background-color:<?php esc_attr_e( $background_color ); ?>;" />
<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div>
</td>
</tr>
<tr valign="top">
<th scope="row"><?php _e( 'Footer Color:', 'p2' ) ?></th>
<td>
<input id="footer_pickcolor" type="button" class="button" name="footer_pickcolor" value="<?php _e( 'Pick a Color', 'footer_colour' ) ?> "/>
<input name="footer_color_hex" id="footer_color_hex" type="text" value="<?php esc_attr_e( $footer_color ); ?>" style="background-color:<?php esc_attr_e( $footer_color ); ?>;" />
<div id="footer_colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div>
</td>
</tr>
</tbody>
</table>
<p>
</p>
<p class="submit"><input type="submit" name="Submit" value="<?php esc_attr_e('Update Options', 'colour' ) ?>" /></p>
</form>
</div>
<script type="text/javascript">
    var farbtastic;

    function pickColor(color) {
        jQuery('#background_color_hex').val(color);
        farbtastic.setColor(color);
       
    }
    function footer_pickColor(footer_color) {
        jQuery('#footer_color_hex').val(footer_color);
        farbtastic.setColor(footer_color);
    }

    jQuery(document).ready(function() {
        jQuery('#pickcolor').click(function() {
            jQuery('#colorPickerDiv').show();
        });
        jQuery('#footer_pickcolor').click(function() {
            jQuery('#footer_colorPickerDiv').show();
        });

        jQuery('#hidetext').click(function() {
            toggle_text();
        });

        farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
        farbtastic = jQuery.farbtastic('#footer_colorPickerDiv', function(footer_color) { pickColor(footer_color); });

    });

    jQuery(document).mousedown(function(){
        // Make the picker disappear, since we're using it in an independant div
        hide_picker();
    });

    function colorDefault() {
        pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
        footer_pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
    }

    function hide_picker(what) {
        var update = false;
        jQuery('#colorPickerDiv').each(function(){
            var id = jQuery(this).attr('id');
            if (id == what) {
                return;
            }
            var display = jQuery(this).css('display');
            if (display == 'block') {
                jQuery(this).fadeOut(2);
            }
        });
        var update = false;
        jQuery('#footer_colorPickerDiv').each(function(){
            var id = jQuery(this).attr('id');
            if (id == what) {
                return;
            }
            var display = jQuery(this).css('display');
            if (display == 'block') {
                jQuery(this).fadeOut(2);
            }
        });
    }

    function toggle_text(force) {
        if(jQuery('#textcolor').val() == 'blank') {
            //Show text
            jQuery( buttons.toString() ).show();
            jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>');
            jQuery('#hidetext').val('<?php _e('Hide Text'); ?>');
        }
        else {
            //Hide text
            jQuery( buttons.toString() ).hide();
            jQuery('#textcolor').val('blank');
            jQuery('#hidetext').val('<?php _e('Show Text'); ?>');
        }
    }



</script>


<?php
    }
}
?>























































































































can anyone see the issues??

Ps, i have searched all over the net for a fix, but not nowing what i have done wrong makes it hard to find a solution.


thanks

Extension:103