Resizing Colorbox After Loading HTML Content Into A DIV

I've ventured to any and all of the posts here about colorbox resizing issues, div properties and numerous other things! Anyway, this very VERY simple piece of code is driving me

Solution 1:

Try waiting until the content is actually loaded.

<script type="text/javascript">
$(document).ready(function () {
    $("#text").load("<%= Model.FileLocation %>", function() {
         $.fn.colorbox.resize();
    });
});
</script>
<div id="text"></div>

Solution 2:

Thanks to anyone who read and tried to come up with a reason to why this didn't work, however, I finally found a work-around.

It appears that for some reason, even putting the resize() in a success callback, it was still getting called too early. I was able to open firebug and manually enter the colorbox.resize() function in the command line and it worked just fine after loading, even though the callback failed.

So what I did was this

$(document).ready(function () {
        jQuery.ajaxSettings.async = false;

        $('#text').load('<%= Model.FileLocation %>');
        $.fn.colorbox.resize();
});

Setting the async in ajax to false forced it to be called in turn, and now it works great and is loading very quickly.