jqxColorPicker and jqxDropDownButton in a jqxWindow - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: color picker, jqxColorPicker, jqxwindow, modal, window, z-index

This topic contains 7 replies, has 3 voices, and was last updated by Dimitar 6 years, 1 month ago.

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

Author

jqxColorPicker and jqxDropDownButton in a jqxWindow Posts

April 24, 2013 at 1:42 am jqxColorPicker and jqxDropDownButton in a jqxWindow #19858

Participant

Hi,

I try to use the ColorPicker call by the DropDownButton. Is working fine when is in a web page but when I try the same thing in a jqxWindow, is showing in the background. Is look a problem with the zindex or I do something wrong ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The jqxColorPicker widget allows you to easily pick a color.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrating.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.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/jqxswitchbutton.js"></script>
      
</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 () {
                var theme = getDemoTheme();
                $("#colorPicker").jqxColorPicker({ color: "ffaabb", colorMode: 'hue', width: 220, height: 200, theme: theme });
                $("#dropDownButton").jqxDropDownButton({ width: 150, height: 22, theme: theme });
                $("#dropDownButton").jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
                
                $("#DLG").jqxWindow({ width: 200,height:200, theme: theme ,maxHeight: 800,isModal: true,resizable: true,modalOpacity: 0.2 });                
                $("#colorPicker2").jqxColorPicker({ color: "ffaabb", colorMode: 'hue', width: 220, height: 200, theme: theme });
                $("#dropDownButton2").jqxDropDownButton({ width: 150, height: 22, theme: theme });
                $("#dropDownButton2").jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "ffaabb" })));
            });
        </script>
        <div id='jqxWidget'>
			<table><tr><td>color</td><td>
            <div style="margin: 3px; float: left;" id="dropDownButton">
                <div style="padding: 3px;">
                    <div id="colorPicker">
                    </div>
                </div>
            </div>
            </td></tr></table>
          
        </div>
                    <div id="DLG">
	            <div>Color in a Windows</div>
	            <div style="overflow : auto;">
             
                                <div style="margin: 3px; float: left;" id="dropDownButton2">
                                   <div style="padding: 3px;">
                                               <div id="colorPicker2" />         
                                       </div>
                                </div>
	                <div id="footer" style="clear:both;text-align:right;">
	                </div>
            </div> </div>
    </div>
</body>
</html>

April 24, 2013 at 5:08 am jqxColorPicker and jqxDropDownButton in a jqxWindow #19868

Dimitar

Participant

Hello

Please, set the DropDownButton’s dropDownZIndex property to 20000 when you initialize the widget.

Best Regards,
Dimitar

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

July 25, 2018 at 11:02 am jqxColorPicker and jqxDropDownButton in a jqxWindow #101212

N.I.Alam

Participant

Hi, i am having similar issues with the color picker in a Dialogue Window. Using the example above if the drop down list is open and i click somewhere in the Dialogue Window it does not loose focus and close, also when i click outside the Dialogue box i get an error message:

jqx-all.js:192 Uncaught TypeError: Failed to execute ‘focus’ on ‘HTMLElement’: parameter 1 (‘options’) is not an object.
at HTMLDivElement.<anonymous> (jqx-all.js:192)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.q.handle (jquery.min.js:3)

I tried changing the zIndex by
$( “#dropDownButton2” ).jqxDropDownButton( { width: 150, height: 22, theme: theme, popupZIndex: 20000 } );
This didn’t help either

July 26, 2018 at 5:48 am jqxColorPicker and jqxDropDownButton in a jqxWindow #101238

Dimitar

Participant

Hi N.I.Alam,

We created an example based on above code that shows how to close the jqxDropDownButton when you click outside it: http://jsfiddle.net/Dimitar_jQWidgets/aykz3dxL/. We were not able to reproduce the error you specified. Could you, please, share more details about it?

Best Regards,
Dimitar

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

July 26, 2018 at 3:38 pm jqxColorPicker and jqxDropDownButton in a jqxWindow #101259

N.I.Alam

Participant

Hi,

I tried your example and still crashes. Do you think its an issue with the version of jqxWidgets i am using?

jQuery : jquery-ui-1.11.4/jquery-ui.min.css
jQWidgets v5.4.0 (2017-Oct)

Thanks

July 27, 2018 at 8:12 am jqxColorPicker and jqxDropDownButton in a jqxWindow #101265

Dimitar

Participant

Hi N.I.Alam,

Please share more information:

Does the JSFiddle example work properly on your side?
What browser are you testing on?
Are you using our jqxWindow or a third-party dialog widget?

We also recommend updating to the latest version of jQWidgets (6.0.4).

Best Regards,
Dimitar

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

August 2, 2018 at 6:16 pm jqxColorPicker and jqxDropDownButton in a jqxWindow #101342

N.I.Alam

Participant

Hi,

Yes the example works, I am testing on Chrome and Chrome Canary. But it doesn’t work with my library files. i am using the jqxWindow , no other dialog.

August 6, 2018 at 5:21 am jqxColorPicker and jqxDropDownButton in a jqxWindow #101371

Dimitar

Participant

Hi N.I.Alam,

Could you, please, share if the issue exists with the latest version of jQWidgets (6.0.5)? Many bug fixes and improvements have been introduced since the release of the version you are using.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.