How do I get the height of a tabcontainer using jQuery or javascript?

Question

I have a tabcontainer within an accordion.

If the tab I am on is shorter than the tab I switch to, I have to scroll to see the content on the new tab.

I want to be able to "catch" the height of the tabcontainer when I switch to it and resize the div that contains it.

I thought:

 function clientActiveTabChanged(sender, args) {

         alert(sender.height());
        };

would show me the height, but it doesn't work.

TabContainer is:

 <ajaxToolkit:TabContainer ID="projTabContainer" OnClientActiveTabChanged="clientActiveTabChanged"  runat="server" CssClass="ajax__tab_red-theme">

Answer 1

i think that this will help you : here

$(myJquerySelector).attr('id');

You have just to change the "id" to "height"

EDIT : You can get the target of the event using : event_target

And to pick the id :

 $('TabContainer').change(function(event) {
  var tabContainerID = $(event.target).attr('id');
  alert(tabContainerID);
});

And now you have the id when you click on the tab. With this id you can find the height easily. I hope that this will help you.

Answer 2

The sender passed to the clientActiveTabChanged is not a jQuery object, it is a DOMElement. Try the following:

function clientActiveTabChanged(sender, args) {
  var height = $(sender).height();
  console.log('height is: ' + height);
};

Answer 3

You can auto re-size the tab container- (Reference: Auto Resize TabContainer)

function clientActiveTabChanged() {
    //get the tabContainer for later reference
    var tc = document.getElementById("<%=tabContainer.ClientId%>");

    //get the index of the tab you just clicked.
    var tabIndex = 
         parseInt($find("<%=tabContainer.ClientId%>").get_activeTabIndex(), 10);

    //set the tabcontainer height to the tab panel height.
    tc.childNodes[1].style.height = 
         tc.childNodes[1].childNodes[tabIndex].clientHeight;
};

Make the changes in above function as required.