How to get height of a div by jQuery?

Asked

Viewed 12,028 times

1

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

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

Code jQuery 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 tried for that Function within the $(document).ready() but it still doesn’t work. I’ve also tried using .innerHeight() and other derivatives without success.

jquery html css div

  • Instead of $(window).load change to $(document).ready or $(function(){/*seucodigo*/});

  • I’ve tried using inside the $(document).ready, it still didn’t work.

  • tries to recover thus http://jsfiddle.net/dieegov/4sc0pm4w/

  • @Neither did Diegovieira. :(

  • Do the following checks on the HTML code, the div has the class ". slide-txt"? Also check by inspecting element if the div has height. Put the HTML code structure if possible, also the css that matches the Divs this can help.

  • That’s all right. Here’s an example: http://jsfiddle.net/jhcapr0n/. That’s weird, because I re-use that same code with $(window).on('resize', function(){ and it works.

  • Is there any other element with the class slide-txt?

  • No, it’s a div only used on the site banner.

Show 3 more comments

4 answers

6


utilize setTimeout in your code so that time of the same render and run.

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);

2

I took your code and I moved it a little bit, I switched that replace that was breaking and I took the autoH2 for . height() and here it worked well, if I could not help you, comment here that I will 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);   
});

  • Really the replace is not as useful, thank you. Maas.. unfortunately did not work :(

  • Read this from here, maybe I can help you. http://api.jquery.com/outerheight/

0

Try it with this:

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);

  • No, keep returning zero height. :(

  • You can put in Codepen.io with HTML and CSS?

  • So, http://jsfiddle.net/jhcapr0n/ here it is. The funny thing is that it worked!! The way I was doing it.... Weird too. Is it because this is the one div .slide-txt stays inside one another div that is being used in a slideshow?

  • That’s why I asked you to put the CSS, I believe that this div has elements with float will need the use of a clearfix.

  • The curious thing is that I re-use the same code with the $(window).on('resize', function(){ and it works. In case the same code is executed when the site is opened, and then when the window is resized.

  • jQuery already uses the getComputedStyle internally.

  • puts a 1 second settimeout in your code and see if it applies what you want, if it works it is because it is not waiting until the end of the code rendering. @Ricardo

  • @Diegovieira put and did not give either. Opens the site with the slide-txt at the top, after 1sec it performs the function and then is given to margin-top wrong, as before. Not getting the height of div even! :\

  • Gave!! I set the timer and it worked.

Show 4 more comments

0

Suggestion from colleague @Diegovieira, who was adding a setTimeout to the code, as it is probably running before all the content of the site is loaded, mainly to div that I’m using.

So, the code fixed and working was 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 very much!

  • Dispose! I will post as my answer ok?

  • You can post yes :)

Browser other questions tagged jquery html css div

You are not signed in. Login or sign up in order to post.