CODEWITHSUNDEEP
javascriptjqueryhtmlcssheight
paulalexandru
paulalexandru

Reputation: 9530

Detect the height auto using javascript

I have a div with a fixed height (ex: 500px). This div contains some html block elements inside it. What i want to achieve is to detect using javascript what height whould have my div if i will set height auto insted of that fixed height.

<div id="someId" style="height: 500px;">
    <p>My paragraf</p>
    <h1>My heading</h1>
</div>

In other order of words, i want to get the height of the div without considering the white space from the bottom.

Is there any way i can do this?

Upvotes: 4

Views: 3595

Answers (3)

paulalexandru
paulalexandru

Reputation: 9530

I think i found a solution:

$('#someId').clone().attr('id', 'cloneId').appendTo('body');
$('#someId').css({'height':'auto','opacity':'0'});
alert($('#someId').height()+'px');

First i dupplicate my div, then i set the clone div height auto, and after that i get it's height.

Upvotes: 0

Akash Sarawagi
Akash Sarawagi

Reputation: 207

check this Fiddle

$(document).ready(function (){
    var previousHgt=$("div").height();
    var getheightWhenAuto=($("div").css("height","auto").height());
    $("div").css("height",previousHgt   )
    alert(getheightWhenAuto);
 });

Upvotes: 1

pewpewlasers
pewpewlasers

Reputation: 3215

How about you calculate the height of the children and add up? Something like:

<div id="#someId" style="height: 500px;">
    <p>My paragraf</p>
    <h1>My heading</h1>
</div>

So in jQuery

var height = $('#someId > p').height()+$('#someId > h1').height();

Edit: Or if you want something general:

var height = 0;
$( "#someId" ).children().each(function() {
  height = height + $(this).height();
});

Upvotes: 0

Related Questions