Question

I have a div which contains several elements:

<div class="menuItem designMenu" id="dMenu">
  <ul class="menuList menu">
    <li class="menuHeader">Design</li>
    <li class="projectHeader">Mother</li>
    <li class="projectBody">Some text here</li>
    <li class="more">More</li>
  </ul>
</div>

I need to get the height of the dMenu items that I can animate it upwards, including all the content inside. My Javascript currently:

var designHeight = $("#dMenu").height();

Returns nothing.

I’ve tried offsetHeight, scrollHeight, and everything else Google turns up. I’m running the jQuery at the end of the body, inside a document ready function.

The reason to get the height to animate, instead of doing it manually, is that a: I’d like to learn how and b: I don’t yet know how many items will be in the div.

Answer 1

Are the lis within the ul floated? If so, and the parent does not have overflow: hidden the parent collapses and therefor has no height. Try (if possible) adding overflow: hidden to the parent element, or hard code a height in your CSS.