CODEWITHSUNDEEP
javascriptjqueryjquery-pluginscolor-pickerjquery-color
Solace
Solace

Reputation: 9010

Why isn't this JQuery Color Picker plugin not getting included/detected in my webpage?

JSFiddle here.

I am trying to include this JQuery plugin (Github) into my a web page. But it seems to Not get included.

I checked this demo page, particularly their <head> tag to see what they have included, and so included JQuery, tinycolor.js, and jquery.colorpickersliders.js (the other scipts included like prettify.js and bootstrap.js don't seem to have an effect - I tested that by removing those <script> tags from their demo).

Then I tool the first example code snippet from their tutorial/guide here, and used it. The problem is that it does not seem to work. What am I missing?

index.php:

<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.css" />
    <script src="jquery-2.1.3.js"></script>
    <script src="jquery-colorpickersliders-master/libraries/tinycolor.js"></script>
    <script src="jquery-colorpickersliders-master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>
</head>

<body>
    <span class="hsl-demo">...</span>
    <script>
        $(".hsl-demo").colorPickerSliders({
            flat:true,
            previewformat:'hsl',
            order: {
                hsl : 1,
                preview : 2
            }
        });
    </script>
</body>


$(".hsl-demo").colorPickerSliders({
  
			flat:true,
  
			previewformat:'hsl',
  
			order: {
				hsl : 1,
				preview : 2
			}
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.js"></script>

<script src="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/libraries/tinycolor.js"></script>

<link href="https://github.com/istvan-ujjmeszaros/jquery-colorpickersliders/blob/master/jquery-colorpickersliders/jquery.colorpickersliders.css" rel="stylesheet" />

<span class="hsl-demo">...</span>

EDIT:

The error in console is:

Timestamp: 4/28/2016 11:05:52 AM
Error: TypeError: $(...).colorPickerSliders is not a function
Source File: http://localhost/Tests/Test1/index.php
Line: 17

Line 17 is the beginning of the <script> tag in the <body> tag.

EDIT 2:

enter image description here

Upvotes: 1

Views: 456

Answers (1)

Abdulrahman Alhemeiri
Abdulrahman Alhemeiri

Reputation: 665

Try to upper case the 'c' in colorPickerSlider to make the code

$(".hsl-demo").ColorPickerSliders({
    flat:true,
    previewformat:'hsl',
    order: {
        hsl : 1,
        preview : 2
    }
});

Note:Never try to include the libraries from github repo directly ,because the resource is read as text/html from github repo over the net. instead try consuming the resource from a CDN.

Live Demo @ JSFiddle

Upvotes: 4

Related Questions