Colorpicker in jqxWindow - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: ColorPicker, DropDown Button, dropDownZIndex, jqxColorPicker, jqxDropDownButton, jqxwindow, window, z-index

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.

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

Author

Colorpicker in jqxWindow Posts

March 13, 2014 at 1:35 pm Colorpicker in jqxWindow #51016

Participant

Hello,

I use jqxcolorpicker in a jqxWindow widget. Updating jqwidgets to the latest version caused that dropDownZIndex is no longer avalable as a property od dropdownbutton which is used as a part of jqxcolorpicker. When I keep dropDownZIndex property in my code I get an error message. When I remove the property, the color picker is shown behind jqxwindow.

I would like to ask you for a help.

Thank you.

Best regards,

Milan Kotaska

March 13, 2014 at 1:55 pm Colorpicker in jqxWindow #51018

Dimitar

Participant

Hello Milan Kotaska,

Please make sure you initialize the dropdown button and the color picker in the window’s initContent callback function, as shown in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <style type="text/css">
        .photo
        {
            width: 500px;
            height: 350px;
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .gallery
        {
            border: 15px solid #ffaabb;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            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;'>#" + 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);
                element.css('background', "#" + color.hex);
                element.addClass('jqx-rc-all');
                return element;
            }

            $(document).ready(function () {
                $("#colorPicker").on('colorchange', function (event) {
                    $("#dropDownButton").jqxDropDownButton('setContent', getTextElementByColor(event.args.color));
                    $('#photoGallery').css('border-color', "#" + event.args.color.hex);
                });

                $('#jqxWindow').jqxWindow({
                    showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
                    initContent: function () {
                        $("#colorPicker").jqxColorPicker({ color: "ffaabb", colorMode: 'hue', width: 220, height: 220 });
                        $("#dropDownButton").jqxDropDownButton({ width: 150, height: 22 });
                        $("#dropDownButton").jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
                    }
                });

                $('#photoGallery').jqxScrollView({ slideShow: true, width: 500, height: 350, showButtons: false });
            });
        </script>
        <div id='jqxWidget'>
            <div class="gallery" id="photoGallery">
                <div>
                    <div class="photo" style="background-image: url(../../images/imageNature1.jpg)">
                    </div>
                </div>
                <div>
                    <div class="photo" style="background-image: url(../../images/imageNature2.jpg)">
                    </div>
                </div>
                <div>
                    <div class="photo" style="background-image: url(../../images/imageNature3.jpg)">
                    </div>
                </div>
                <div>
                    <div class="photo" style="background-image: url(../../images/imageNature4.jpg)">
                    </div>
                </div>
                <div>
                    <div class="photo" style="background-image: url(../../images/imageNature5.jpg)">
                    </div>
                </div>
            </div>
            <br />
            <label style="margin-left: 5px; font-size: 12px; font-family: Verdana;">
                Select Frame color</label>
            <br />
            <div id="jqxWindow">
                <div>
                    Color Picker
                </div>
                <div>
                    <div style="margin: 3px; float: left;" id="dropDownButton">
                        <div style="padding: 3px;">
                            <div id="colorPicker">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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.