jQuery UI Widgets Forums Dialogs and Notifications Window Window occasionally shows multiple images in close button area

This topic contains 5 replies, has 2 voices, and was last updated by  jbpd 9 years, 7 months ago.

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

  • jbpd
    Participant

    The window close button doesn’t show just the X for the close button, it shows the close, key, light bulb, scissors, clipboard, copy, and a couple more. When you click on the group of images, it closes the window. It works as expected, but shows more images than just the close button. The code has been around for a couple versions, so perhaps some code has been update.


    jbpd
    Participant

    I noticed that if I add the autoOpen:false, it does the error, if I don’t have that, it works as expected, just autoOpens, which I don’t want.


    Peter Stoev
    Keymaster

    Hi jbpd,

    Please provide an example and which theme you use.

    Best Regards,
    Peter Stoev

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


    jbpd
    Participant

    I can’t give too much of the code as it’s on another machine, but here’s the main parts of the window. It’s using UI Smoothness for the theme and the page includes the following js files:

    jqx.ui-smoothness.css
    jqxdata.js
    jqxwindow.js
    jqxtabs.js
    jqxbuttons.js
    jqxscrollbar.js

    $(#divWindow”).jqxWindow({ width:850, height:540, resizable: false, theme: ‘ui-smoothness’, isModal: true, autoOpen:false });

    <div id=”divWindow”>
    <div id=”divSubWindow”><div></div></div>
    <div>
    <table>
    <tr>
    <td><div></div></td>
    </tr>
    </table>
    </div>
    </div>


    Peter Stoev
    Keymaster

    Hi jbpd,

    I use this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Window, Window Widget, Window" />
        <meta name="description" content="This demo demonstrates how to trigger some of the jqxWindow events like open, closed and moved." />
        <title id='Description'>This demo demonstrates how to trigger some of the jqxWindow events like open, closed and moved.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript">
            function capitaliseFirstLetter(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }
            function displayEvent(event) {
                var eventData = 'Event: ' + capitaliseFirstLetter(event.type);
                if (event.type === 'moved') {
                    eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
                }
                if (event.type === 'close') {
                    eventData += ', Dialog result: ';
                    if (event.args.dialogResult.OK) {
                        eventData += 'OK';
                    } else if (event.args.dialogResult.Cancel) {
                        eventData += 'Cancel';
                    } else {
                        eventData += 'None';
                    }
                }
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            }
            function addEventListeners() {
                //Closed event
                $('#eventWindow').on('close', function (event) {
                    displayEvent(event);
                });
                //Dragstarted event
                $('#eventWindow').on('moved', function (event) {
                    displayEvent(event);
                });
                //Open event
                $('#eventWindow').on('open', function (event) {
                    displayEvent(event);
                });
                $('#showWindowButton').mousedown(function () {
                    $('#eventWindow').jqxWindow('open');
                });
            }
            function createElements() {
                $('#eventWindow').jqxWindow({
                    autoOpen: false,
                    maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
                    resizable: false, isModal: true, modalOpacity: 0.3,
                    okButton: $('#ok'), cancelButton: $('#cancel'),
                    initContent: function () {
                        $('#ok').jqxButton({ width: '65px' });
                        $('#cancel').jqxButton({ width: '65px' });
                        $('#ok').focus();
                    }
                });
                $('#events').jqxPanel({ height: '250px', width: '450px' });
                $('#showWindowButton').jqxButton({ width: '100px' });
            }
            $(document).ready(function () {
                addEventListeners();
                createElements();
                $("#jqxWidget").css('visibility', 'visible');
            });
        </script>
    </head>
    <body class='default'>
        <div style="visibility: hidden;" id="jqxWidget">
            <input type="button" value="Show" id="showWindowButton" />
            <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;"
                id="mainDemoContainer">
                <div>Events Log:</div>
                <div id="events" style="width: 300px; height: 200px; border-width: 0px;">
                </div>
                <div id="eventWindow">
                    <div>
                        <img width="14" height="14" src="../../images/help.png" alt="" />
                        Modal Window</div>
                    <div>
                        <div>
                            Please click "OK", "Cancel" or the close button to close the modal window. The dialog
                            result will be displayed in the events log.
                        </div>
                        <div>
                        <div style="float: right; margin-top: 15px;">
                            <input type="button" id="ok" value="OK" style="margin-right: 10px" />
                            <input type="button" id="cancel" value="Cancel" />
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    I then apply the ui-smoothness theme by adding the ?ui-smoothness attribute – this is possible because of demos.js. I cannot reproduce an issue with jQWidgets 3.5. Btw. do you add jqx.base.css before jqx.ui-smoothness.css?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    jbpd
    Participant

    Yes, the site.Master has the base css and each window has its own theme declaration. I’m running 3.4. I’m still trying to figure out what is exactly causing it to not work properly. It works as expected on some and not on others.

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

You must be logged in to reply to this topic.