Fire $.colorbox.resize() after overlay content is AJAX loaded? Im using the colorbox and colorbox_node module. Out of the box you have to specify a fixed height for the overlay. However I want the overlay to be the same height as its content. 

This can be done with $.colorbox.resize. The issue is that it doesnt work if I call it on cbox_complete. The reason is that cbox_complete happens before the content is loaded with AJAX, so its as if there is no content and the height is set to 0 (plus padding).

Ive got it working with the following. Its not a great solution, Its not completely robust and the time delay before the resize isnt an ideal user experience. 

        $(document).bind('cbox_complete', function(){ 
            setTimeout($.colorbox.resize,1000);             
        });


UPDATE - I dont know if its best practice (I expect not) but the following placed in the tpl file works: 

UPDATE 2 - I spoke too soon. This screws up in IE8 (im not testing on 7 or 6). For one node the 'x' to close the overlay is missing. For the other node only the top 20px or so of the overlay is visible.

&lt;script type="text/javascript"&gt;
    (function($) {
        Drupal.behaviors.global_custom_two = {
                attach : function(context, settings) {  
                        $.colorbox.resize();
                }
    }})(jQuery);
&lt;/script&gt;
Drupal has behaviors for interacting after ajax events.
For more information on drupal javascript see http://drupal.org/node/756722

You should be able to do it using something like this:

(function ($) {

  Drupal.behaviors.yourBehavior = {
    attach: function (context, settings) {
      $(document).bind('cbox_complete', function() { 
        setTimeout($.colorbox.resize, 1000);             
      });
    }
  };

})(jQuery);


The easiest way to implement this, if you want it in your theme is to put that above code in a script.js file in your theme (you can name that file anything and have as many separate files as you like) then in your info file have

scripts[] = script.js


You can also put it in a js subdirectory and in your info file then put

scripts[] = js/script.js


You can then also put other behaviors in there too.

That will load your javascript on all pages though, which in some cases is desired but in some cases is not.

If you only want it to load on some pages then you call

drupal_add_js('path/to/js/file.js');


from wherever you want to load it.

For example, if you only want it to load on full node pages you could put this in your THEMENAME_preprocess_node() function in your template.php file.

// Only attach this on full node pages.
if (!empty($variables['page'])) {
  drupal_add_js(drupal_get_path('theme', 'THEMENAME') . '/script.js');
}


Or you could do it in a module using something like hook_node_view().