How to get height of a div by jQuery?

Navigation
1

I have a small jQuery script for loading the page, a calculation based on the height of a div is added, and then a margin is added for the result.

The problem is that you are not getting the height value of this div . In case, there is no CSS pre-determining the height of it, so the height varies according to its content.

jQuery code that I'm using: 

$(window).load(function(){ 
    var alturaDivTxt2 = $(".slide-txt").height();
    var autoH2 = $(".autoH-banner").css("height");
    var alturaDoBanner2 = (autoH2.replace("px","") / 2) + 60;
    var alturaTxtFinal2 = alturaDoBanner2 - alturaDivTxt2;
    alert('div: '+alturaDivTxt2+' banner: '+alturaDoBanner2+' final: '+alturaTxtFinal2);

    $(".slide-txt").css({ "margin-top": +alturaTxtFinal2+"px" }); 
});

I put that alert just to see if the data was being processed correctly.

The value of alturaDivTxt2 returns zero .

What could be wrong? I've already tried this function inside $(document).ready() but it still does not work. I've also tried using .innerHeight() and other derivatives, without success.

    
asked by anonymous 01.10.2014 / 16:02

4 answers

5

Use setTimeout in your code so that it can render and execute. 

setTimeout(function() { 
    var alturaDivTxt2 = $('.slide-txt').height();
    var autoH2 = $(".autoH-banner").height();
    var alturaDoBanner2 = (autoH2 / 2) + 60;
    var alturaTxtFinal2 = alturaDoBanner2 - alturaDivTxt2;

    $(".slide-txt").css({ "margin-top": +alturaTxtFinal2+"px" });
}, 600);
    
02.10.2014 / 20:09
2

I got your code and changed a little bit, I changed the replace that was breaking and got autoH2 for .height () and it worked right here, if I could not help you, comment here that I'll try to help you better ^^ 

$(document).ready(function(){
    var alturaDivTxt2 = $('.slide-txt').height();
    var autoH2 = $(".autoH-banner").height();
    var alturaDoBanner2 = (autoH2 / 2) + 60;
    var alturaTxtFinal2 = alturaDoBanner2 - alturaDivTxt2;

    console.log('div: '+alturaDivTxt2+' banner: '+alturaDoBanner2+' final: '+alturaTxtFinal2);   
});
    
01.10.2014 / 16:40
0

Try this here: 

var alturaDivTxt2 = $(".slide-txt")[0].getBoundingClientRect().height;

Update:

Use the window.getComputedStyle method, this method returns all computed CSS: 

var div = $('.slide-txt')[0];
var alturaDivTxt2 = parseInt(window.getComputedStyle(div).height);
    
01.10.2014 / 16:09
0

My colleague's suggestion @DiegoVieira, was to add a setTimeout to the code, since it is probably running before all the content of the site is loaded, mainly the div I am using.

So, the corrected and working code looks like this: 

setTimeout(function() { 
    var alturaDivTxt2 = $('.slide-txt').height();
    var autoH2 = $(".autoH-banner").height();
    var alturaDoBanner2 = (autoH2 / 2) + 60;
    var alturaTxtFinal2 = alturaDoBanner2 - alturaDivTxt2;

    $(".slide-txt").css({ "margin-top": +alturaTxtFinal2+"px" });
}, 600);

Thank you!

    
01.10.2014 / 16:55
How to compare 2 powers Is it recommended to test model validations?