CODEWITHSUNDEEP
jquerytabsheight
Nin-ya
Nin-ya

Reputation: 252

Get table height that is located on not active tab

I'm using Jquery Tab, I have table for each tab. How can I get height of ALL table simultaneously(not to get table height per active tab using event like click) .

   $(function() {
        $( "#tabs" ).tabs();
  });
alert("Table 1 Height is : "+ $("#table1").height());
alert("Table 2 Height is : " +$("#table2").height());

Note,

See Fiddle

Upvotes: 1

Views: 527

Answers (2)

jazZRo
jazZRo

Reputation: 1608

A way is to walk over the tabs and initially activate/deactivate them:

$(function() {
    var tableHeights = {};
    $( "#tabs" ).tabs();

    $( "#tabs" ).tabs('widget').children('div').each(function(i) {
        var table = $(this).find('table');
        $( "#tabs" ).tabs('option', 'active', i);
        tableHeights[ table.attr('id') ] = table.height();
    });
    $( "#tabs" ).tabs('option', 'active', 0);

    alert("Table 1 Height is : "+ tableHeights['table1']);
    alert("Table 2 Height is : "+ tableHeights['table2']);
});

See the edited Fiddle

The advantage compared to Wenceslao Negrete's answer is that the tabs switch and not just the content. But there is no way of doing it without the flashing content on each page load. The cleaner way requires the assurance that all table cells have the same height. No content is needed to be visible this way but if the height of the rows differ it won't give the desired result:

var rowHeight;
$( "#tabs" ).tabs('widget').children('div').each(function(i) {
    var table = $(this).find('table');
    if (i === 0) {
        // assuming on load the active tab is always the first
        rowHeight = table.find('td:first').height();
    }
    tableHeights[ table.attr('id') ] = table.find('tr').length * rowHeight;
});

Upvotes: 0

Wenceslao Negrete
Wenceslao Negrete

Reputation: 556

Like the comment after your post said, there is no "API way" to get what your looking for, but you can use this code snippet, to achieve your purpose.

$(function() {
   $( "#tabs" ).tabs();
   $('#tabs div').each(function(index){
     var display = $(this).css('display');
     $(this).css('display', 'block');
     table = $(this).find('table');
     alert("Table "+ index +" Height is : "+ table.height());         
     $(this).css('display',display);
   });
});

Upvotes: 1

Related Questions