CODEWITHSUNDEEP
javascriptjqueryjquery-layout
Jeach
Jeach

Reputation: 9042

jQuery Layout: Refreshing/Redrawing/Resizing a panel (after hiding/showing a header or footer)

I'm using a standard jQuery layout (north, south, west, east and center) as indicated in the site documentation.

For both my west and center panels, I have a header and footer pane.

Everything is working correctly except that now I needed to temporarily 'hide' the header and/or footer, to eventually show them again at some point.

Since I'm not aware of a way to programmatically hide/show the header and footer panes, I'm reverting to basic jQuery.

I created the following function:

// action = hide, show
// panel  = center, east, west
// pane   = header, footer
function setPaneState(action, panel, pane) {
  if (action) {
    switch (action) {
      case 'hide':
        $(".ui-layout-" + panel + " > .ui-layout-" + pane).hide();
        break;
      case 'show':
        $(".ui-layout-" + panel + " > .ui-layout-" + pane).show();
        break;
    }
  }
}

And I call it this way:

setPaneState('hide', 'center', 'header');

and

setPaneState('show', 'center', 'header');

Everything works well except that when I hide the header, the footer moves up by the equivalent space. The center panel does not seem to 'refresh' or 'redraw' itself. I would like the panel which gets altered to be redrawn correctly, but I'm not sure how to tell jQuery layout how to do that.

I know that jQuery layout provides the following API to hide/show panels.

layout.hide(panel); // Where 'panel' is one of: 'north', 'south', 'east', or 'west'

But nothing seems to exist for panes (header/footer).

Note that layout.resizeContent("west"); as documented here, doesn't seem to work, throwing Uncaught TypeError: layout.resizeContent is not a function exception.

Any help is appreciated.

Update: I've found that this layout.sizePane('north', 100); actually works though.

By the way, I'm using jquery.layout 1.4.3

Upvotes: 1

Views: 592

Answers (1)

Jeach
Jeach

Reputation: 9042

I found the following which seems to work well.

layout.resizeAll();

So now it looks like this:

// action = hide, show
// panel  = center, east, west
// pane   = header, footer
function setPaneState(action, panel, pane) {
  if (action) {
    switch (action) {
      case 'hide':
        $(".ui-layout-" + panel + " > .ui-layout-" + pane).hide();
        break;
      case 'show':
        $(".ui-layout-" + panel + " > .ui-layout-" + pane).show();
        break;
    }

    layout.resizeAll();   // <=== Added 
  }
}

Although I would have expected a more 'focused' resize, such as on a specific panel. And not the entire layout. Hopefully I won't get rendering performance issues when my panels (west and center) have a lot of content in them.

If anyone is interested in the actual layout, here it is:

<body class="wrapper" ng-app="app">
  <div class="ui-layout-north" style="display: none;">
    <div class="ui-layout-content">
      <div id="ui-view-north" ui-view="north">Header Panel</div>
    </div>
  </div>

  <div class="ui-layout-center" style="display: none;">
    <div class="ui-layout-header">Center Header</div>
    <div class="ui-layout-content">
      <div id="ui-view-center" ui-view="center">Center Content</div>
    </div>
    <div class="ui-layout-footer">Center Footer</div>
  </div>

  <div class="ui-layout-west" style="display: none;">
    <div class="ui-layout-header">West Header</div>
    <div class="ui-layout-content">
      <div id="ui-view-west" ui-view="west">West Content</div>
    </div>
    <div class="ui-layout-footer">West Footer</div>
  </div>

  <div class="ui-layout-east" style="display: none;">
    <div class="ui-layout-header">East Header</div>
    <div class="ui-layout-content">
      <div id="ui-view-east" ui-view="east">East Content</div>
    </div>
    <div class="ui-layout-footer">East Footer</div>
  </div>

  <div class="ui-layout-south" style="display: none;">
    <div class="ui-layout-content">
      <div id="ui-view-south" ui-view="south">South content</div>
    </div>
  </div>
</body>

Yes, I'm using AngularJS multi-views.

Upvotes: 1

Related Questions