窗口垂直调整大小问题

Question

Im trying to resize the window. it works horizentally but not vertically. What am I doing wrong here:

$(window).resize(resizeWebSite());

function resizeWebSite(){

    $("#panel").height($(window).height() - 10);
    $("#map").height($(window).height() - 10);

     console.log($("#map").height() / 2);   

     var loaderTop = ($("#map").height() - $("#loadingIndicator").height()) / 100 + $("#map").position().top;
     var loaderLeft = (($("#map").width() - $("#loadingIndicator").width()) / 100) + $("#map").position().left;


    $("#loadingIndicator").css({'position' : 'absolute' , 'left' : loaderLeft + 'px', 'top' : loaderTop + 'px'});    
}

resizeWebSite();

Answer 1

When you set up the event handler, you need to pass only the name of the function:

$(window).resize(resizeWebSite);

Now a further problem with this will be that on a desktop/laptop machine (traditional computer, as opposed to a tablet), where the user can resize the browser window interactively, the browser will fire "resize" events very rapidly. All that work inside the handler will make the response very sluggish and jumpy.

To counteract that, you can use a timer. The idea is to respond to a "resize" event by first cancelling any pending timer, and then setting a new timer for some time in the future (a hundred milliseconds or so) to run the actual code that deals with the new window size. That way, while the user is moving the mouse quickly to change the window size, the only work you're doing is clearing and resetting a timer, which is pretty fast. Only when the user stops moving the mouse for a while do you actually do any real work.

That would look something like this:

var resizeTimer = null;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resizeWebSite, 100);
});

Answer 2

Maybe this is what you're after?

function resizeWebSite(){

    $("#panel").height($(window).height() - 10);
    $("#map").height($(window).height() - 10);

     console.log($("#map").height() / 2);   

     var loaderTop = ($("#map").height() - $("#loadingIndicator").height()) / 100 + $("#map").position().top;
     var loaderLeft = (($("#map").width() - $("#loadingIndicator").width()) / 100) + $("#map").position().left;


    $("#loadingIndicator").css({'position' : 'absolute' , 'left' : loaderLeft + 'px', 'top' : loaderTop + 'px'});    
}

$(document).ready(resizeWebSite);    
$(window).resize(resizeWebSite);

By the way, if you're using margin on the elements you're reading the height on, and you want to include them in the calculations, use outerWidth(true) instead of width()