0

I have a requirement where my header height changes.The header takes some time or say delay while loading.And based on the header height,my body's height has to be calculated and should be set accordingly.

Here's the sample code:

<div class="header header.row">
header content
</div>

<div class="main main.row">
body content
</div>

JS Code:

document.ready(function()
{
main.top=header.height;
});

My concern is how can we know when the header div is completely loaded.Is there any way to find that the header is finally loaded and then calculate the body position.Workaround tried is setting up delay of 750ms.But as delay normally won't work in real scenarios,trying to find alternatives.

Any help is surely appreciated.

Thanks in advance.

keerthi karri
  • 1
  • 1
  • 1
  • Are you opposed to using jQuery? You can use `$(window).load(function(){});` in jQuery to get heights only after the entire page is loaded. – MillerMedia Jul 04 '14 at 06:20

2 Answers2

1

You can listen for the onload event, either on window or document e.g. 

document.onload = function() {
  var height = document.getElementsByClassName('header')[0].clientHeight;
}

Note, don't need header and header.row; you should just use header row to give the div both classes.

Community
  • 1
  • 1
Isaac
  • 15,783
  • 9
  • 53
  • 76
0

With jQuery it's something like this:

$(window).load(function() {
    $('.main').css('top', $('.header').height());
});
Yannici
  • 736
  • 5
  • 17