jQuery UI Widgets Forums Editors Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader jqxColorPicker and jqxDropDownButton in a jqxWindow

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 1 year, 5 months ago.

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

  • kingdomp
    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>

    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/


    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


    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/


    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


    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/


    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.


    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/

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

You must be logged in to reply to this topic.