CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Eli O.
Eli O.

Reputation: 2111

Bootstrap colorpicker basic example does not work

I would like to use a color picker plugin for bootstrap : https://farbelous.io/bootstrap-colorpicker/index.html

It uses bootstrap 4 and Jquery

When trying the very basic code example, published by the developer, in my website or in JS Fiddle, the color picker just does not work properly (you should see a clickable square on the left and be able to pick a color with it)

JsFiddle

What am I doing wrong ? I thought it might be the imports that did not work, so I used CDNs but it does not change anything

JsFiddle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo').colorpicker();

      // Example using an event, to change the color of the .jumbotron background:
      $('#demo').on('colorpickerChange', function(event) {
        $('.jumbotron').css('background-color', event.color.toString());
      });
    });
  </script>
</body>

Upvotes: 2

Views: 3055

Answers (3)

Gursagar Singh
Gursagar Singh

Reputation: 1

<!DOCTYPE html>
<html>

<head>
    <title>jQueryUI | Color Picker</title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />

    <!-- Include Pre-compiled files from link or
        download the files in your localhost folder -->
    <script src=
"jquery.colorpicker.js">
    </script>
    <link href=
"jquery.colorpicker.css"
        rel="stylesheet" type="text/css" />

    <style>
        
        
    </style>
</head>

<body>
   
    
    <br/>

    <body>
        Pick a color :
        <input type="text" id="my_color_picker">

        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_color_picker").colorpicker();
                });
            });
        </script>
    </body>
</body>

</html>

Note:- Download jquery.colorpicker.js & jquery.colorpicker.css files from https://github.com/vanderlee/colorpicker

Upvotes: 0

KTW
KTW

Reputation: 125

Here is fixed version of your code: Fixed version.

There was a problem with loading jQuery from CDN.

Chrome returned error:

Failed to load resource: the server responded with a status of 404.

So I've re-added CDN and everything works fine.

Upvotes: 5

shajji
shajji

Reputation: 1667

I think you made a slight mistake. Please go to your jquery-3.3.1.slim.min.js - the link is not correct. Replace yourjquery-3.3.1.slim.min.js link with the following:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js'></script>

Upvotes: 1

Related Questions