JQuery.height () is not working properly

Question

I have a page where I want the div standing next to each other to be of equal height.

I have the following function:

function setProjectsHeight() { var count = 0; $(".project").each(function() { if(count % 3 === 0) { var highest = 0; for(i=count;i<=count+2;i++) { if($("div.project#"+i).height() > highest) { highest = $("div.project#"+i).height(); } } console.log(highest); } count++; }); } 

Somehow, the height is always zero. The selector seems to be right (checked), and when console.log () is the width with the same selector, it returns 200 (correctly).

EDIT: Just decided! Somehow I had the idea to set "body {display: none}" in css and set this property back to "block" at the end of document.ready (). I did this because I am using jQuery UI buttons, and users have seen that these buttons switch from a regular UI bar link.

When I removed this functionality, everything worked again. It seems when setProjectsHeight () was called, the body was still showing: block. Thus, there was no calculated height.

Thanks for your help!

Answer 1

Just decided! Somehow I had the idea to set "body {display: none}" in css and set this property back to "block" at the end of document.ready (). I did this because I am using jQuery UI buttons, and users have seen that these buttons switch from a regular UI bar link.

When I removed this functionality, everything worked again. It seems when setProjectsHeight () was called, the body was still showing: block. Thus, there was no calculated height.

Thanks for your help!

Answer 2

Try calling this function from the window.load () event instead of document.ready ().

The reason for this problem is that jQuery does not start the width () and height () parameters until all the img / object / ... elements have finished loading - ready () fires as soon as the page is processed, but some objects can still boot at this moment.

Answer 3

Make sure you have an element that clears float / apply clearfix (if something floats). if you do not, at least the parent container will not be expanded to the height it should have.

Also try using .outerHeight() because it includes border sizes and paddings.

Answer 4

your selector may be wrong. you should simply use the id selector yourself, as identifiers are unique in the document and have a quick search:

 $('#'+i) 

also, as people said, its not valid for the identifier to start with a number (but works in most browsers)

it is also possible that you might have duplicate identifiers in your DOM, in which case nothing will work as you expect. Domain IDs must be unique .

Answer 5

Are you sure that each .project element has a corresponding ID attribute, since the $("div.project#"+i) selector expects an identifier of 0, 1, 2, etc.?

Answer 6

If the tag identifiers are 1, 2, 3 , then give a space after the project

 $("div.project #"+i)