Question

I got a small problem with the JavaScript window on load function. The goal of the script is to make the height of my #headerdiv always equal to the size of the screen.

When I open the page it doesn’t show my #headerdiv (I guess because the height isn’t added by my JavaScript code). as soon as I resize my browser window the #headerdiv pups up and resizes to the height of the screen. So I guess its just the window load function which doesn’t work? Anyone has a suggestion?

Here is my code:

Javascript:

<script>
$(function(){
    $(window).load(function(){ // On load
        $('#headerdiv').css({'height':(($(window).height()))  +'px'});
    });

    $(window).resize(function(){ // On resize
        $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
    });
});     
</script>

Html + css:

<style>
    #headerdiv {width:100%; background:blue;padding:0;margin:0;overflow:auto;}​
</style>

<div id="headerdiv"></div>

Answer 1

You don’t need there $( window ).load() as $(function(){ already do $( document ).ready() (see official docs for shortcuts)

So at this point your code already loaded. Just try:

$(function(){

   $('#headerdiv').css({'height':(($(window).height()))  +'px'});

   $(window).resize(function(){ // On resize
    $('#headerdiv').css({'height':(($(window).height()))+ 'px'});
   });

});