How to collect the height of an element with jQuery

Asked

Viewed 627 times

4

Oops, I’m not getting the height of an object in the document.

I have a slider, which works with ul > li (may be relevant), and inside a slide <li>, I am placing via javascript and c# three Divs, each with an image inside. What I need to do is recall the time the image was rendered. I have tried several ways to access, but it seems that javascript can not collect the data at runtime...

I’ve tried to:

$("foo").height();
$("foo").naturalHeight(); // nesse caso eu teria uma solução "budget" para o caso
$("foo").outerHeight();

After storing the data, I need to set in another div according to the found result.

$("#noticias").css("height", fullHeight);

I have also tried to give a timeout after feeding the Divs created by c#, but also did not solve. The question is: Is there anything that helps me collect data at runtime? Between js and jQuery?

I appreciate any suggestion.

javascript jquery dom
  • 1

    Can you add an example in jsFiddle? what you experienced is correct, I don’t notice what might be failing.

  • Very complicated, besides the data come from c#, as mentioned, I’m using bootstrap and more the slider plugin...

  • Do you have a live link? If it’s not going to be difficult... have you tried with element.offsetHeight or element.getBouningClientRect().height or even window.getComputedStyle(element).height?

  • 1

    None of these, I will test these here, worst of all on local server :/ Already put the test result.

  • Log the height of the image into the console. See if you are returning the value. Do this with height(). In case it does not return anything the problem is in the identification of the element. As @Rgio said it is kind of complicated to help the blind so.

  • We did some experiments and it was clear that the problem is in the running time. I tested with a Sleep of 500 and it worked.

  • In this case try using a recursive setInterval or setTimeout, which checks whether the value is a valid value according to its rules. Another solution is to create an Eventlistener and trigger this C#event. Or even use something generic like when the page is loaded $(document).ready(function(){ //code });

  • 1

    This question seems to be decontextualized because the problem is not clear and it is not possible to reproduce.

  • Make an example in Fiddle that represents your already rendered HTML.

  • If I understand correctly, you have several images of heights distinct. When changing the image in the slider, you want the slider acquire the current image height, correct?

Show 5 more comments

3 answers

3

Please check if the following code solves your problem:

$(window).load(function() {
    console.log($("#foo").outerHeight());
});

I don’t think the image will be loaded the moment you try to calculate the height of it.

1

When you pass the C# instructions, pass using the following function:

string html_para_passar = "<script>$('#id').appendTo('#id_2');</script>"; //no caso aqui usando jQuery
RegisterStartupScript("", html_para_passar);

1

I made a test here p/ you, this is how I do, probably you are not managing to perform what you want for some reason "after" you have already set the height.

$('#foo').click(function(){
    var altura = $(this).height();
    $('#noticias').css('height', altura);
});
#foo{width: 150px; height: 150px; background: blue;
color: white;}
#noticias{width: 150px; height:50px; background: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo'>clique aki</div>
<br><br><br>
<div id='noticias'></div>

Browser other questions tagged javascript jquery dom

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