jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Window occasionally shows multiple images in close button area
Tagged: close button, jqxwindow, multiple images
This topic contains 5 replies, has 2 voices, and was last updated by jbpd 10 years, 1 month ago.
-
Author
-
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.
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.
Hi jbpd,
Please provide an example and which theme you use.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/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>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 StoevjQWidgets Team
http://www.jqwidgets.comYes, 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.
-
AuthorPosts
You must be logged in to reply to this topic.