Databases
StackOverflow2013
Postsdbo
POdynamically change height of div jquery on window resize
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdynamically change height of div jquery on window resize
    primarykey
    data
    text
    <p>I am using the code from <a href="https://stackoverflow.com/questions/7821184/each-in-a-div-element-find-a-child-element-set-height-based-on-its-content">.each() in a div element, find a child element, set height based on its content (advanced?)</a> its working fine on page load but not working with window resize please help</p> <pre><code>$('#col-main &gt; div').each(function () { var tmpHeight = 0; $(this).find("h2").each(function() { tmpHeight = $(this).height() &gt; tmpHeight ? $(this).height() : tmpHeight; }); $(this).find("h2").height(tmpHeight); }); </code></pre> <p>Adding working code on page load from this code I get height of taller div (column) ".demographcont" in a row (".box") which i set to other divs in the row for same height ".demographcont". its worked for all rows. <img src="https://i.stack.imgur.com/edqKk.png" alt="on normal size"></p> <p>Not worked on window resize its reset the height and the height will come as per content <img src="https://i.stack.imgur.com/hSEOS.png" alt="window resize"></p> <p>after page refresh on window resize <img src="https://i.stack.imgur.com/1qpMq.png" alt="enter image description here"></p> <pre><code>/* code for adding height to div as per content */ function setHeight() { $('.box').each(function () { var tmpHeight = 0; $(this).find(".demographcont").each(function () { tmpHeight = $(this).height() &gt; tmpHeight ? $(this).height() : tmpHeight; }); $(this).find(".demographcont").height(tmpHeight); // alert(tmpHeight); }); } $(document).ready(function () { setHeight(); }); $(window).resize(function () { setHeight(); }); </code></pre> <p>Html code here </p> <pre><code>&lt;div class="box clearfix"&gt; &lt;div class="demographcont clearfix"&gt; &lt;div class="grid_12"&gt; &lt;div class="grid_5"&gt; &lt;label&gt; Date of Birth:&lt;/label&gt; &lt;/div&gt; &lt;div class="grid_7"&gt; 18/06/2013 &lt;/div&gt; &lt;/div&gt; &lt;div class="grid_12"&gt; &lt;p&gt; content1&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="demographcont"&gt; &lt;div class="grid_12"&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;/div&gt; &lt;div class="grid_12"&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;p&gt; content1&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>.demographcont{ border:1px solid #006599; padding:0; line-height:20px; }</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USSagar
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POdynamically change height of div jquery on window resize
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POdynamically change height of div jquery on window resize
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhat exactly are you trying to do in the context of your question? What part of it isn't working on resize?
      singulars
      1. POdynamically change height of div jquery on window resize
      1. USJnatalzia
    2. COi am adding dynamic height on div its worked fine on page load but on window resize its not working the height added by "tmpHeight" is reset as it is
      singulars
      1. POdynamically change height of div jquery on window resize
      1. USSagar
    3. COI added the html code which work fine but not working on resize. i am using fluid 960 grid layout so resize window smaller height should be resize dynamically
      singulars
      1. POdynamically change height of div jquery on window resize
      1. USSagar
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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