Question

I have multiple html blocks in a jQuery cycle instance, like so:

<div class="pane" id="...">
 <div class="title">
  <span>...</span>
  <div class="sS">...</div>
 </div>
</div>

.pane is the cycle slide. I want to get the height of each of the spans independently (as they contain different amounts of text so some wrap onto two lines on smaller screens).

With the height calculated, I want to apply this value to the height of the parent .title – independently (without having to work it all out manually for each pane based on ID).

So far I have:

 $(".pane").each(function() {
    var tpheight =  $(this).find("span").outerHeight()
    $(this).find(".title").css({"height" : tpheight + "px"})
})

which sort of works (inclusion of “px” makes no difference) but the first span comes out as the correct height but all the other spans in the other panes are too short. I’m using outerHeight as I need to include the padding. This is the page I’m working on:

http://test.soundvaultstudios.co.uk/services

A lot of other posts talk about getting the height of the tallest element and applying that value to every other element, but I want the values all worked out independently. The reason I’m doing this is when you hover over the pane the title div gets a style of height:auto to reveal the contents of .sS , then on mouseleave the height of the title div reverts back to the height of the span. I hope that makes sense, have a look at the site to see what I mean. The hover function generates the correct height changes however, but I want the page to load in the same way.

Thanks in advance.

Answer 1

I figured out where I was going wrong. My each function was setup perfectly fine, it was the position of it in relation to the cycle initialisation that was the problem (It was causing script placed after it to malfunction). Putting the cycle initialisation last in my block (or at least after my each function) has worked as I intended. If anyone sees this question who’s using Cycle, take note of the order of your script, Cycle last!