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

score 1 · Answer 1 · answered Mar 14 '13 at 10:27

1

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

answered Mar 14 '13 at 10:27

Rich O'Kelly

41,274
9
83
114

score 1 · Accepted Answer · edited May 23 '17 at 12:28

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.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 14 '13 at 10:28

Francois Borgies

2,378
31
38

Trouble is, I don't know the ID of the element, as the tabcontainer is nested in a repeater. is there a way I can use "sender" to identify the element? – Ben Mar 14 '13 at 10:33

score 1 · Answer 3 · answered Mar 14 '13 at 11:58

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.

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

3 Answers3