Is it incorrectly counting the height of an element on page load?

Question

css

Hello.
When the page loads, I have this function:

$(document).ready(function () {
  bountyWizard();
})
function bountyWizard() {
  var activeBlockHeight = $(".bounty-elements__element.active").height();
  var parentBlock = $(".bounty-elements");
  parentBlock.height(activeBlockHeight)
  $(window).resize(function () {
    activeBlockHeight = $(".bounty-elements__element.active").height();
    parentBlock.height(activeBlockHeight)
  })
  
  $('.bounty-wizard__step').on('click', function(e) {
  
    e.preventDefault();
    var id = $(this).attr('data-bounty-id');
    var element = $('div[id="' + id + '"]');
    
    $(".bounty-wizard__step").removeClass("active");
    $(".bounty-elements__element").removeClass("active");
    
    $(this).addClass("active");
    element.addClass("active");
  
    var activeBlockHeight = $(".bounty-elements__element.active").height();
    parentBlock.height(activeBlockHeight)
  
  
  })

The problem is that f-i does not always give the height correctly, and this is critical, because y .bounty-elements__elementstands postition: absolute;and if the wrong height is given, then the blocks find each other
. What is the solution?

Answer 1

your question is understandable, but the outcome is not logical. Do you have a dynamic block height? if yes, then ok, and if not, then why are you redefining the height 3 times .... You are very clogging up your code ....
First, create a plunker for us so that we can see why you define a variable for height 3 times, and set it :)
I would create function getHeight(){} if I were you ..... and then declare it both in resize and in click... And we definitely need an example because everything should work correctly from your question and code ... Maybe something third-party is interfering, or something you didn't take into account