Databases
StackOverflow2013
Postsdbo
POjQuery - independently set each element height to child element height for each instance
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery - independently set each element height to child element height for each instance
    text
    copied!<p>I have multiple html blocks in a jQuery cycle instance, like so: </p> <pre><code>&lt;div class="pane" id="..."&gt; &lt;div class="title"&gt; &lt;span&gt;...&lt;/span&gt; &lt;div class="sS"&gt;...&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><code>.pane</code> 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).</p> <p>With the height calculated, I want to apply this value to the height of the parent <code>.title</code> - independently (without having to work it all out manually for each pane based on ID).</p> <p>So far I have:</p> <pre><code> $(".pane").each(function() { var tpheight = $(this).find("span").outerHeight() $(this).find(".title").css({"height" : tpheight + "px"}) }) </code></pre> <p>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 <code>outerHeight</code> as I need to include the padding. This is the page I'm working on:</p> <p><a href="http://test.soundvaultstudios.co.uk/services" rel="nofollow">http://test.soundvaultstudios.co.uk/services</a></p> <p>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 <code>height:auto</code> to reveal the contents of <code>.sS</code> , 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.</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload