Script analysing DIV height non function

Question

I have the following script that is not appearing to work.

var height = $('#sidebar1').height();
var pageHeight = $(window).height();

if ((height) > 600) {
  alert('haha');
}

The ineveitable conlcusion to this script is to have it analayse against pageHeight rather than 600, but I cannot get this to work even with 600.

I can only conclude it is something to do with this div: #sidebar1 being a floaty stick element. Here is its CSS.

.sidebar { float: right; width: 190px; padding-top:8px; }

The script is part of a load whereby the div: #sidebar1 's height expands as content is loaded in based on choices in a form.

Any Ideas,

Marvellous

EDIT : From including the alert as the height of the element we can see now that the height gets stuck at '430' even though it seemingly continues to expand. Any ideas

Answer 1

I tried the following which works for me. Check the id and class attributes for the div element, and make sure the content is actually greater than 600 (height) you can try adding an else statement to see your height:

$(document).ready(function(e) {
var height = $('#sidebar1').height();
var pageHeight = $(window).height();

    if ((height) > 600) {
        alert('haha');
    }

    else {
        alert(height);
    }
});


.sidebar { 
    float: right; 
    width: 190px; 
    padding-top:8px; 
}


<div id="sidebar1" class="sidebar">
    <img src="SomeContent.png" width="190" height="601" />
</div>