jQuery UI Widgets Forums Dialogs and Notifications Window Hiding a jqxWindow

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Hiding a jqxWindow #3054

    Dror Saddan
    Member

    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
    Hiding a jqxWindow #3071

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.