Question

Still learning this jQuery stuff….

I like this ajax page loader; it works for WordPress on a <div id="content"> right out of the box. But one thing bothers me: the collapses while ajax loads the page and spins the spinner, and I’d like to be able to have the div retain some of it’s size instead of making the footer of the page jump up and then down. The doesn’t have to be taller than 500-600 px, just so it doesn’t bounce the footer up and down. Is that possible with this function in the way it’s written? Below are the most relevant functions. (Others I’ve left out have to to with WordPress and its URL structure.)

function loadPage(url){
  if(!isWorking){
    scroll(0,0);
    document.getElementById('content').innerHTML='<center><img src="'+loadingIMG.src+'" /></center>';
    http.open('GET',url,true);
    isWorking=true;
    http.onreadystatechange=showPage;
    http.send(null);
  }
}

function showPage(){
  if(http.readyState==4){
    if(http.status==200){
      isWorking=false;
      var content = http.responseText;
      content = content.split('id="content"')[1];
      content = content.substring(content.indexOf('>')+1);
      var depth=1;
      var output='';
      while(depth>0){
        temp = content.split('</div>')[0];
        //count occurrences
        i=0;
        pos = temp.indexOf("<div");
        while(pos!=-1){
          i++;
          pos = temp.indexOf("<div",pos+1);
        }
        //end count
        depth=depth+i-1;
        output=output+content.split('</div>')[0]+'</div>';
        content = content.substring(content.indexOf('</div>')+6);
      }
      document.getElementById('content').innerHTML=output;
      pageLoaderInit();
    }else{
      alert(http.status);
    }
  }
}

Answer 1

I don’t actually see any jquery there, but you should be able to use plain old javascript to set the height of the content div.

In loadPage:

var contentDiv = document.getElementById('content');
contentDiv.innerHTML='<center><img src="'+loadingIMG.src+'" /></center>';
contentDiv.style.height = "600px";

In showPage:

var contentDiv = document.getElementById('content');
contentDiv.innerHTML=output;
contentDiv.style.height = "";