How to wait for div to load before calling another function?

Question

<script>
var href;

    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            href = this;

            // cover all bookmarks
            $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black');
            $("."+($(this).attr("class"))).css('background-color', '#F5F5F5');

            // uncover chosen bookmark
            $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white');
            $("#"+($(this).attr("id"))).css('background-color', 'white');

            $("#tempMain").load($(this).attr("href")); // load content to temp div

            setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn
        });

    });

    function resizeDivs() {
        var heightNew = $("#tempMain").css("height");
        $("#rightColumn").css('height',heightNew);
        $("#main").css('height',heightNew);
        // $('#main').load($(href).attr('href'));
        $("#main").html($("#tempMain").html()); // is faster than loading again
    }
</script>

I'm loading subpages to a selected div of my main page by a jQuery function. In order to synchronise main div's and right column's height I'm using jQuery's .css() method. I wanted that resizing to look smoothly, so I've resolved it to following steps:
1. Load content of a subpage to an invisible temp div.
2. Calculate the height of that temp div.
3. Change the height of main div and right column to the height of that temp div.
4. Load content of a subpage to main div.

However, I am aware that my current way of doing this is pretty lame because of using setTimeout() as an improvisation of waiting for content to load - I've tried using $(document).ready but with no luck. Using a global variable (var href) also doesn't seem lege artis, but passing this operator of $("a.load").click function by apply() didn't work either.

How to do it "the right" way?

Answer 1

with jquery

function waitForElement(elementPath, callBack){
  window.setTimeout(function(){
    if($(elementPath).length){
      callBack(elementPath, $(elementPath));
    }else{
      waitForElement(elementPath, callBack);
    }
  },500)
}

e.g. to use:

waitForElement("#myDiv",function(){
    console.log("done");
});

here is without jquery

function waitForElement(elementId, callBack){
  window.setTimeout(function(){
    var element = document.getElementById(elementId);
    if(element){
      callBack(elementId, element);
    }else{
      waitForElement(elementId, callBack);
    }
  },500)
}

e.g. to use:

waitForElement("yourId",function(){
    console.log("done");
});

Answer 2

Use load callback

$("#tempMain").load($(this).attr("href"),function(){
   resizeDivs();
   // do other stuff load is completed
});

Answer 3

You can attach a callback in the jQuery load function :

$("#tempMain").load($(this).attr("href"), resizeDivs);

see : http://api.jquery.com/load/