Question

I have a web page whose layout is constructed using a Table

<table id="page-head">
 <tr style="vertical-align: top">
  <td class="s-part">
     <table class="s-table" style="height: 131px; ">
        <tr class="s-head"><td></td></tr>
        <tr class="s-body"><td></td></tr>
     </table>
  </td>
  <td class="main-part">
     <div><!-- The Main Part --></div>
  </td>
 </tr>
</table>

<!-- Menu -->

<table id="page-foot"> . . . </table>

The Main Part contains the content of the page

-> in Page-Head, it contains logo and site links

-> in Page-Foot, it contains the actual content of the page.

The screen is below:

Page screenshot

I faced a problem: The s-part is a table and I had to resize it to match the height of the main-part. So I used this jQuery script

var adjustSideBar = function () {
 var e = $("#page-head");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
 var e = $("#page-foot");
 if ($(".s-table", e).outerHeight() < $(".main-part", e).outerHeight()) {
     $(".s-table", e).css({ "height": $(".main-part", e).outerHeight() - 5 });
 }
}

So it automatically adjusted as shown in (1) and (3) from the above Screen Shot

Now the problem is, When I use dynamic content like jQuery PlugIn and Toggling the div elements in page-foot -> main-part, the s-part is not resizing. Again I called the adjustSideBar() function whenever I Toggle the content in the page. But it resulted as below:

1. Before Toggling, 2. After Toggling & 3. Again Toggling of “Sec 1”:

Toggling Screenshot

Note: the gray bar is an Expander constructed using a jQuery PlugIn.

The function call is done from here:

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(); 
            // this to toggle the content of the Sec #
    adjustSideBar();
});

---

Can I know what to do now guys, to resize the inner table s-part such that both s-part and main part of same heights?

If you want I can give additional codes that are involved also. But I think they are not concerned here. [ Additionally, I use PHP for server side programming for if there is something I can do with it too ]

Thank you in advance.

PS: I am not allowed to post images as of now. So I’m just Hyperlinking them.

Answer 1

First up, I should discourage using tables for layout.

For the answer, you should use the callback for slideToggle to call the sidebar adjustment after the animation instead of calling it right after the slideToggle function like so:

$("div[id^='sec']").click(function (e) {
    $(".e-content", this).slideToggle(500, adjustSideBar);
}

Even like this it will first animate and adjust the background only after the toggle has finished. I am not certain this will fix your problem completely, but something you can work on.

I suggest using http://jsfiddle.net/ or similar to make a test case so your problem can be tested easier.