Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery color picker error

I am trying to implement the jquery colorpicker(last one) 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 included and css colorpicker is just not working. Any suggestions on how I can get rid of that error?

like image 924
coletrain Avatar asked Mar 20 '12 16:03

coletrain


1 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

like image 95
Arnab Shaw Avatar answered Sep 21 '22 10:09

Arnab Shaw