jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Hiding a jqxWindow
Tagged: dialog, hide window, open dialog, show, show window, window
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 12 years, 7 months ago.
-
AuthorHiding a jqxWindow Posts
-
Peter:
Suppose that I need to hide and show a jqxWindow. It is as simple as
<div id='window2' style="visibility:hidden"> <div>Header2</div> <div>Content2</div> </div>
It turns out that the “x” used for “closing” the window keeps on showing. Looking at the HTML you can see the div wrapping the picture has its own style=”visibility: visible” instead of inheriting it from its parent. It is fairly easy to work around it but the workaround is quite ugly:
<!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>jQuery Window CSS Styling Sample</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/> <link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css"/> <script type="text/javascript" src="scripts/jquery-1.7.1.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { $("#window1").jqxWindow({ height: 120, width: 150, theme: 'summer', showCollapseButton: true }); $("#window2").jqxWindow({ height: 120, width: 150, theme: 'summer', showCollapseButton: true }); hideWindow('window2'); }); </script> <script language="javascript" type="text/javascript"> function displayWindow(winName) { $('#' + winName).css('visibility', 'visible'); } function hideWindow(winName) { $('#' + winName).css('visibility', 'hidden'); var div1 = $('#' + winName).children()[0]; $($($(div1).children()[0]).children()[1]).css('visibility', 'inherit'); } </script> <div id='window2'> <div>Header2</div> <div>Content2</div> </div> <div id='window1'> <div>Header1</div> <div> Content1 <button onclick="displayWindow('window2')">Show Window 2</button><br /> <button onclick="hideWindow('window2')">Hide Window 2</button> </div> </div> </div> </body> </html> If possible fix the bug in future versions. BTW jqxDocking has the same bug. Dror
Hi Dror,
To show or hide a window, you need to use the jqxWindow’s API. There are ‘show’ and ‘hide’ methods which is the correct way to work with the jqxWindow. Please take a look at this help topic for additional information: jquery-window-api.htm
Examples:
Show:
$('#jqxWindow').jqxWindow('show');
Hide:
$('#jqxWindow').jqxWindow('hide');
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.