Question

I currently have a page that is being resized through the use of javascript whenever the end-user resizes the window, so that scrolling is reduced or eliminated when not necessary. I have a loader.js jquery file which picks out .html documents to throw in to the content section of the page when the user selects an option from the left menu:

$("#response").load("home.html");
$("#home").click(function(){
// load home page on click
    $("#response").load("home.html");
    setTimeout("resizefunc()",500);
});
$("#about").click(function(){
// load about page on click
$("#response").load("about.html");
    setTimeout("resizefunc()",500);
});
//etc

While these timeout functions work most of the time, they have the potential to fail if the page loads abnormally slow for any reason. I am using document.ElementId.scrollHeight to determine the height of each new page, but it seems to only detect the height after the changes have been correctly applied. If the javascript loads before the page content then the resize fails.

It seems that if I were using complete html documents for each page then the problem would be irrelevant. I could put an onLoad event in to the body of each one and have it resize there… But since the tag is only loaded once I’m somewhat at a loss. My current implementation “works”, but I feel that there should be something more efficient.

Answer 1

Don’t use onLoad, instead wrap your code in

$(window).load(function() {
  // your code here
});

Also, instead of load() with just the filename as a parameter, use:

$('#response').load('file.html', function() {
  resizefunc();
});