Prevent div from collapsing while using jQuery.load

Question

Hi, I load external content to replace a DIV.

Problem is, when the ajax-loader.gif replaces the initial content the page shrinks in height and the scrollbar is likely to disappear. As soon as the external content is loaded the scrollbar reappears. That jerking takes away the smoothness.

Is there a smoother way? Maybe preserve the height of the div until the external content is loaded? I cannot use fixed heights. Here's my function:

function(){
    $('.filter a').click(function(){
    $('#mydiv').html('<p><img src="ajax-loader.gif" /></p>');
    $('#mydiv').load('/site/?key=Value');
  return false;
});

(Project is a faceted search in Wordpress).

Thank you!

Answer 1

You can load the content using $.ajax() and set the html of the div to the content it returns...

$.ajax({
  url: '/site/?key=Value',
  success: function(data) {
    $('#mydiv').html(data);
  }
});

Edit: I assume your shifting is due to the loading image being smaller from your other comment... this should fix that:

var storedHeight = $('#mydiv').height();
$('#mydiv').html('<p><img src="ajax-loader.gif" /></p>').find('p').height(storedHeight);

Answer 2

have you tried setting the min-height?

something like this might work:

$(function(){
    $('.filter a').click(function(){
       var height = $('#mydiv').height();
        $('#mydiv').attr('style', 'min-height:' + height);
        $('#mydiv').html('<p><img src="ajax-loader.gif" /></p>');
        //changed            
        $('#mydiv').load('/site/?key=Value', function(){
            $('#mydiv').removeAttr('style');
            $('#mydiv').attr('style', 'height:auto;');            
        });
        //end of changed
        return false;
    });
});