I have a total of seven divs, each with the class "row". Initially, their content is hidden but there is a timeline that spans from the first row to the last one. The height of the timeline is calculated dynamically based on the combined heights of all rows. Here's the code snippet:
<div id="milestone_view" class="timeline">
<div id="line" ></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Here's the JavaScript code:
var totalHeight = 0;
$("#milestone_view").children('.row').each(function(){
totalHeight += $(this).height();
$(this).attr('height',$(this).height());
});
$("div#line").css({height:(totalHeight)});
alert(totalHeight);
I included
$(this).attr('height',$(this).height());I hope my explanation was clear. This is just a small part of an application developed in kendoui, but currently facing issues. Worth noting is that these divs are loaded dynamically, not just their content. Also, the number of divs can vary, possibly more or less than seven.