javascriptjqueryjquery-uijquery-layout

Hide North Panel if Nothing to Show with JQuery UI Layout

I have a simple layout with north and center:

<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="north-main-div">
        </div>
        <div id="center-main-div">
        </div>
    </body>
</html>

And JavaScript which makes a hideable Northpanel.

topMainLayout = $('body').layout({
    name : 'bodyLayout',
    north__paneSelector : '#north-main-div',
    center__paneSelector : '#center-main-div',
    north__resizable : false
});

I would like to achieve that the whole north area is invisible including the toggler if nothing (no content) is within the north-main-id. Currently the toggler will show even if nothing is to show there.

I would appreciate any hint for solving the issue.

Thanks

Solution

  • Not sure if this is the proper way, but it worked for me.

    I juste check with if it is empty and call the hide function.

    topMainLayout = $('body').layout({
    name : 'bodyLayout',
    north__paneSelector : '#north-main-div',
    center__paneSelector : '#center-main-div',
    north__resizabele : false
}); 
if (!$.trim( $('#north-main-div').html() ).length) {
        topMainLayout.hide("north");
}