Databases
StackOverflow2013
Postsdbo
PODetecting div height on resize
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODetecting div height on resize
    text
    copied!<p>I am trying to detect the height of a div that I am loading content into. This div does not have a specified height, as I am loading pages into it and they themselves fill up the div in different amounts. I think the code I am using is not working.</p> <p>The <code>#content div</code> is getting the correct height on <code>document load</code>, however I cannot get the height when the <code>load</code> event is clicked.</p> <p>html:</p> <pre><code>&lt;div id="select"&gt; &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="load" href="javascript:void(0)" id="p1"&gt;P1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="load" href="javascript:void(0)" id="p2"&gt;P2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="spacer"&gt;&lt;/div&gt; &lt;div id="content"&gt;&lt;/div&gt; </code></pre> <p>css:</p> <pre><code>#content { left: 227px; top: 20px; width: 703px; padding: 0 0 100px 0; position: absolute; } #spacer { border-right: 2px solid #000000; left: 10px; position: absolute; top: 710px; width: 215px; } </code></pre> <p>my jquery:</p> <pre><code>$(document).ready(function() { //Load Initial Content $("#content").html('&lt;ul&gt;&lt;li&gt;Loading Content...&lt;/li&gt;&lt;/ul&gt;') .load("/content/" + "projects.php", null, function() { contentHeight = $("#content").height(); selectHeight = $("#select").height(); $("#content").height(contentHeight); $("#select").height(selectHeight); $("#spacer").height((contentHeight - selectHeight - 40) + "px") .css({"top": selectHeight + 40 + "px" }); }); //Load content on click function $(".load").click(function(){ loadName = $(this).attr("id"); $("#content").html('&lt;ul&gt;&lt;li&gt;Loading Content...&lt;/li&gt;&lt;/ul&gt;') .load("/content/" + loadName + ".php", null, function(){ contentHeight = $("#content").height(); selectHeight = $("#select").height(); $("#spacer").height(0); if(selectHeight &gt; contentHeight) { $("#spacer").css({"display": "none"}); }else{ $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" }) .height((contentHeight - selectHeight - 40) + "px"); return false; } }); }); }); </code></pre> <p>I am getting this in firebug on load:</p> <pre><code>&lt;div id="select" style="height: 689px;"/&gt; &lt;div id="spacer" style="height: 5461px; top: 729px;"/&gt; &lt;div id="content" style="height: 6190px;"/&gt; </code></pre> <p>Now if I click on say P2, the div with content height stays the same, even though the actual content inside the div is only 625px tall; so it is not getting switched.</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