Geek Answers Handbook

Error choosing jquery color

I'm trying to implement jQuery colorpicker (last) from eyecon.ro/colorpicker , but whenever I click on the actual colorpicker nothing appears jquery throw this error message

$("#colorSelector").ColorPicker is not a function
 onChange: function (hsb, hex, rgb) {

Here is my code

js file

// Colorpicker
$('#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);
}
});

HTML file

<html>
<head>
    <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
    <title>ColorPicker - jQuery plugin</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>
<body>
    <div class="wrapper">
      <p>
         <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
      </p>  
    </div>
</body>
</html>

I have all the files and css colorpicker just doesn't work. Any suggestions on how I can get rid of this error?

+5
source share
2 answers
<script type="text/javascript" src="jQuery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                            var borderColor;

            $('#tbcontentBorder').ColorPicker({
                onSubmit : function(hsb, hex, rgb, el) {
                    $(el).val('#' + hex);
                    $(el).ColorPickerHide();
                    borderColor = $('#tbcontentBorder').val();
                    $('#news').css('border-color', borderColor);
                },
                onBeforeShow : function() {
                    $(this).ColorPickerSetColor(this.value);
                }
            }).bind('keyup', function() {

                $(this).ColorPickerSetColor(this.value);

            });
        });

    </script>

HTML

<div class="textBoxHolder">
        <label >Select Color</label>
        <input type="color" id="tbcontentBorder"  />
    </div>

its working fine for me

+4
source

You have added a text box control, i.e. <input type="text"/>? In your html, enter the identifier in the text box that will select the color.

+2
source

More articles:


All Articles