How to collapse the height of an element with jQuery

Question

How to collapse the height of an element with jQuery

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

4

Oops, I'm not able to collapse the height of an object in the document.

I have a slider, which works with ul > li (maybe it's relevant), and inside a <li> slide, I'm putting via javascript and c # three divs, each with an image inside. What I need is to collect the height that the image was rendered. I have tried in many ways access, but it seems that javascript can not gather data at runtime ...

I've tried:

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

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

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

I've also tried to give a timeout after feeding the divs created by C #, but that did not work either. The question is: Is there anything that helps me gather data at runtime? Between js and jQuery?

I appreciate any suggestions.

javascript jquery dom

asked by anonymous 11.06.2014 / 21:40

3 answers

How to format a cell from the RGB code contained in the cell itself Use list as dictionary value using append () method Python

score 3 · Answer 1

Please check if the following code solves your problem:

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

I think the image will not be loaded when you try to calculate the height of the image.

score 1 · Answer 2

When you pass the infos in C #, pass using the following function:

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

score 1 · Answer 3

I did a test here for you, that's how I do it, you probably can not do what you want for some reason "after" it's already set.

$('#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>