-1

I have a banner that varies in height based on the buttons, I'm not sure if that is bad design not have something concrete but the height is set to auto. I want to get this height so that I can base other dimensions based on the height of this banner.

I tried the following but the alert said null

<script type="text/javascript">
function getBannerHeight() {
var height = $('#banner').height();
alert(height);
}
getBannerHeight();
</script>

I'm looking at the .height documentation for jquery and I see as a sample this:

$( "#getp" ).click(function() {
  showHeight( "paragraph", $( "p" ).height() );
});

So is it a notation problem? I mentioned javascript as any option is fine, whichever works.

-- update --

I guess this is a flawed way to do design. The idea was to take the resulting banner height which would vary in height due to the buttons inside, and then subtract this from the total window height as a base to the other dimensions. Which for this to work, the banner nor any other elements would exist and the dimensions would have to be calculated then assigned to be created on the screen... ehhh

At any rate my question was answered, thank you.

janicehoplin
  • 397
  • 7
  • 15
  • 1
    If the element does not exist, then you cannot get its height. Can you clarify what you're trying to achieve exactly? – Frédéric Hamidi Sep 10 '15 at 09:56
  • Remember to use `$(document).ready(function(){ .... })` – Satpal Sep 10 '15 at 09:56
  • You can only call `getBannerHeight();` after the element exists, and as we can't see exactly where the code is in relation to the HTML, it's highly likely the element **doesn't** exist yet. Wrap your code in `$(function(){ ... });` – freefaller Sep 10 '15 at 09:59
  • I want to get the height as soon as the banner exists so that all of the other elements based on that dimension can be properly sized, as I said this could be a flawed premise for design. – janicehoplin Sep 10 '15 at 10:15

1 Answers1

4

try this:

<script type="text/javascript">
$(function(){ 
    function getBannerHeight() {
         var height = $('#banner').height();
         alert(height);
    }
    getBannerHeight();
});
</script>

or try below if your jQuery library is yet to load.

<script type="text/javascript">
 window.onload = function() { 
    function getBannerHeight() {
         var height = $('#banner').height();
         alert(height);
    }
    getBannerHeight();
}
</script>
user9371102
  • 1,278
  • 3
  • 21
  • 43