After .load, div won't change height, but after second it will

Question

Hi everyone!

Let's get straight to the code:

$(".btn-slide").live("click", function(e){

  if (e.preventDefault) { 
   e.preventDefault(); 
  } 
  else { 
   e.returnValue = false; 
  }

  //deo za dobavljanje odgovarajuce stranice
  link = $(this).attr("href");

  if($('#post-content').hasClass("active")){
   $("#post-content").slideToggle("slow");
   $('#post-content').toggleClass("active");
  }

  $('#post-content').load(link);

  $("#post-content").slideToggle("slow");
  $('#post-content').toggleClass("active");

  $('#content').height($('#post-content').height()); return false;
 });

So, I'm loading some contents into my current page/div on a click, but the content div just won't resize after the first call. But when I click the link again, it resizes... Solution anybody?

Answer 1

Your exact problem is not clear, but the cause of your problem is clear. It has to do with the active class. Since we can't see what the active class is -- I can't say for sure. But lets look at what happens:

Case 1 -- #post-content starts having active

 - Button is pressed
 - (slide is toggled)
 - Active is removed
 - Content is loaded
 - (slide is toggled)
 - Active is turned back on.


Case 2 -- #post-content starts not having active

 - Button is pressed
 - Content is loaded
 - (slide is toggled)
 - Active is turned on.

Based on this If active starts on there is no change after the first run.

If active starts off, then case 2 gets run once and case 1 gets run from then on.

Sounds like you want to make sure case 1 is the only thing run make sure #post-content starts having class active and you should be fine.

On the other hand, your code does not make so much sense, so you might want to change it, add comments, re-factor, etc.

Answer 2

The problem was that the $('#post-content').height() is unknown until the slideToggle animation finishes. So just putting the resize logic inside a callback function of the slideToggle solved that. Here is the code that worked for me:

$(".btn-slide").live("click", function(e){

        link = $(this).attr("href");

        if($('#post-content').hasClass("active")){
            $("#post-content").slideToggle("slow");
            $('#post-content').toggleClass("active");
        }

        $('#post-content').load(link);

        $("#post-content").slideToggle("slow", function(){
            //deo za poravnavanje visina
            h=0;
            //velicina contenta zbog accordiona
            $('.sidebar-arch').children().each(function() {
                h = h + $(this).outerHeight(true) + 20;
            });

            $('#content').height(h);

            if($('#post-content').height() > $('#content').height()){
                $('#content').height($('#post-content').height());
            }

            $('#post-content').toggleClass("active");
        });

        return false;
    });

Thank you all for your comments. I will learn to better organize my code ^_^