Fire $.colorbox.resize() after overlay content is AJAX loaded?

Question

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.

<script type="text/javascript">
    (function($) {
        Drupal.behaviors.global_custom_two = {
                attach : function(context, settings) {  
                        $.colorbox.resize();
                }
    }})(jQuery);
</script>

Answer 1

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().

Answer 2

If you don't want to use setTimeout and hope the content is in the DOM, you can check the context for an element you know should be there in a behavior attach callback. For example:

(function ($) {
  Drupal.behaviors.yourBehavior = {
    attach: function (context, settings) {

      $('.selector-in-your-loaded-content', context).once('your-selector-processed', function() {
        $.colorbox.resize();
      });

    }
  };
})(jQuery);

The reason the cbox_complete callback gets called before your content is there is because the Ajax load has completed from Colorbox's point of view. However, since Drupal is delivering an array of Ajax callback commands, they run after Colorbox's event, and those commands are where your content is added to the DOM.

Most (all?) of the Ajax commands fire Drupal.attachBehaviors() when they are done, which is where you should be checking if your content has loaded.