0

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>

2 Answers 2

2

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

3
  • Ive updated my question. Its working for me when placed in my content type tpl file, however is this not best practice?
    – Evanss
    Apr 26, 2013 at 14:30
  • Ive updated my question again. The code isnt working in IE8. Ive noticed a syntactical difference in our codes, I dont have your 2nd to last ;. Ive tried both variations and neither works in IE8.
    – Evanss
    Apr 26, 2013 at 17:01
  • I added some info regarding how to add the js to my answer. The second to last semicolon should be there. Not sure why it would not work in IE8. It is even possible that you have unrelated javascript errors in IE8 (in some other js code) that are causing it not to work. - I have done very similar things in the past with colorbox that have worked in IE8.
    – rooby
    Apr 27, 2013 at 0:31
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.