jQWidgets Forums

Tagged: ColorPicker

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

problem recreating color picker Posts
March 4, 2015 at 11:02 pm problem recreating color picker #68044

rtessler
Participant

create the color picker, then create it again, clicking on the color picker produces and error in jqxcolorpicker.js
see code below

<!doctype html>
<html>
<body>

<head>

<style>

.color-selector {
width: 50px;
}

.color-selector .jqx-icon-arrow-down {
background-image: none;
}

.field {
margin-top: 0px;
margin-bottom: 10px;
overflow: hidden;
}

</style>

<link rel=”stylesheet” type=”text/css” href=”js/libs/jqwidgets-ver3.6.0/jqwidgets/styles/jqx.base.css” >

<script src=”js/libs/jquery-1.11.1.min.js” ></script>

<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxcore.js”></script>
<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxnavigationbar.js”></script>
<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxdropdownbutton.js”></script>
<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxbuttons.js”></script>
<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxcolorpicker.js”></script>
<script src=”js/libs/jqwidgets-ver3.6.0/jqwidgets/jqxscrollview.js”></script>

</head>

<body>

<div class=”field color-selector”>

<div id=”fontColorDropDownButton” >
<div style=”padding: 3px;”>
<div id=”fontColorPicker”></div>
</div>
</div>

</div>

create color picker

<script>

$(document).ready(function() {

function getTextElementByColor(color) {

if (color == ‘transparent’ || color.hex == “”) {
return $(“<div style=’text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;’>transparent</div>”);
}

var element = $(“<div style=’text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px; height: 18px; border: 1px solid #fff;’> </div>”);
//var element = $(“<div style=’text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;’>#” + color.hex + “</div>”);
var nThreshold = 105;
var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
var foreColor = (255 – bgDelta < nThreshold) ? ‘Black’ : ‘White’;

element.css({ color: foreColor, background: “#” + color.hex }).addClass(‘jqx-rc-all’);

return element;
}

function createColorPicker(color_picker, dropdown, background_color)
{
if (!color_picker || !dropdown)
return;

dropdown.jqxDropDownButton({ width: 60, height: 25 });
dropdown.jqxDropDownButton(‘setContent’, getTextElementByColor(new $.jqx.color({ hex: background_color })));

color_picker.jqxColorPicker({ color: background_color, colorMode: ‘hue’, width: 220, height: 220, showTransparent: false });

color_picker.on(‘colorchange’, function (event) {

dropdown.jqxDropDownButton(‘setContent’, getTextElementByColor(event.args.color));

var color = event.args.color.hex;

console.log(“color = ” + color);
});
}

$(“.create-color-picker”).click(function(e) {

var color_picker = $(“#fontColorPicker”);
var dropdown = $(“#fontColorDropDownButton”);
createColorPicker(color_picker, dropdown, “000”);
});
});

</script>

</body>
</html>

March 5, 2015 at 8:19 am problem recreating color picker #68063

Nadezhda
Participant

Hello rtessler,

In the above code you are using class selector create-color-picker which is not created in your html. You are also using invalid html structure.
Please, follow the HTML structure from jqxColorPicker demos (Default Functionality and Settings) and take out the double body tag from your code.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.