asp.net jquery element - get overall height of items

Question

5.00/5 (1 vote)

See more:

Hi Experts,

I have a jquery element with a preset height 200px, overflow hidden and position relative; that cannot be changed. I would like to get the height of the actual element since the items inside it differ in height and quantity. That is, no one element is exactly 200px because if one has 2 items it is very short and if the other has 20 items it would be relatively much taller. One way to do this is to traverse the items in the element and += their height right?

a). Is there an efficient jquery loop to do this? (for each...)
b). Do you know of any other way of getting the REAL height of the element as it appears on screen?

If you do not understand my question, kindly let me know and I will find a better way.

Thanks a lot for your assistance,
Justin

Posted 21-Apr-13 7:52am

Jukatzu

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Brian A Stephens · Answer 1 · 2013-04-22T04:34:00

Solution 2

If you need to know what the height would have been without some of it being hidden, refer to the scrollHeight property (even though there's no scrollbar with overflow hidden):

$('#whatever')[0].scrollHeight

Posted 22-Apr-13 4:34am

Brian A Stephens

saguptamca · Answer 2 · 2013-04-22T03:48:00

Solution 1

Use this function to find the max height:

function() {

var max = 0;

this.each(function() {
max = Math.max( max, $(this).height() );
});

return max;
};

Posted 22-Apr-13 3:48am

saguptamca

Comments

Brian A Stephens 22-Apr-13 10:39am

This code returns the height of ONE item (the largest item) within the div, not the cumulative total height. The question is about the total height.