CODEWITHSUNDEEP
javascripthtmljquery
Ityka Bandta
Ityka Bandta

Reputation: 105

Fetch height of an element inside a not-active tab on document ready?

I have a tabs navbar as follows-

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">TAB1</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><p>TAB2<p></div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">TAB3</div>
</div>

I want to fetch the height of the TAB2 text as soon as I load the document.

$('document').ready(function(){
 console.log($(p).css('height')); 
});

This returns me 0px. However, if I try to fetch it from a button within the tab, it gives the result as the text is already rendered by then.

Is there a way to achieve this?

Upvotes: 2

Views: 649

Answers (1)

Always Helping
Always Helping

Reputation: 14570

You can do this but you have show the p OR other elements you want to get height of in DOM - show as in only to show get the height and then hide again. You will not even notice about show and hide.

Since the height method only works on elements that are available on the page your p or other divs are hidden by default

I have using pure JavaScript which is jQuery anyways. You can use forEach to loop through all the elements first and add show class and then remove class once we have fetched the height.

To get the actual height / width OR x/y etc etc you can this one function getBoundingClientRect which will return everything you want.

Live Working Demo:

window.addEventListener('DOMContentLoaded', (event) => {
  let rect = document.querySelectorAll('p')
  rect.forEach(function(x) {
    x.parentElement.classList.add('show', 'active') //add active class
    let elem = document.querySelector('p').getBoundingClientRect() //get all the `p` height
    console.log(elem.height) //get height 24
    console.log(elem) //the whole object i.e height / width` OR `x/y`
  })
  rect.forEach(function(x) {
    x.parentElement.classList.remove('show', 'active') //remove active class
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">TAB1</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>TAB2</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    TAB3
  </div>
</div>

Upvotes: 1

Related Questions