CODEWITHSUNDEEP
javascriptjqueryasp.nettabcontainer
Ben
Ben

Reputation: 4319

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

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">

Upvotes: 2

Views: 624

Answers (3)

Microsoft DN
Microsoft DN

Reputation: 10030

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.

Upvotes: 1

Francois Borgies
Francois Borgies

Reputation: 2408

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.

Upvotes: 1

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41767

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);
};

Upvotes: 1

Related Questions