Question

This is going to be long…

Okay, so what I’m trying to accomplish is making the outer div change size when the child div changes, but the change is currently a flickering motion, it goes from point “a” to point “b”.

Another way of my explaining:

• Original Dimensions:

Inner div: 300px by 300px

Outer Div: 300px by 500px

• New Dimensions:

Inner div: 300px by 400px

Outer div: 300px by 600px

When the inner div, it forces the outer div to change to the height of the new dimensions. The way the transitions are happening are like this:

Original page -> Fade out current content -> Load new content -> Fade in new content -> flick outer dimensions into place

I’m trying to get it like:

Original page -> Fade out current content -> adjust outer dimensions with an animate -> Load new content -> Fade in new content

The code

• The jQuery

  $(this).click(function(){
      currentPageItem = $(this);
      elem = $(this).attr('id');
      view = 'views/' + elem + '.php';
      $('#content').fadeOut('slow', function() {
          $(this).hide();
          $(this).load(view, function() {
          $(this).fadeIn('slow');
      });
  });
  

Answer 1

Set the CSS of the inner div to “height:100%;”. That way you only have to resize the outer div.

If there’s some detail Im not understanding, probably a jsfiddle would help.