Question

I’m trying to create a generic Colorbox launcher for several links that need to load external (same server, different page) content. In some cases, I need to be able to link within the content without leaving the modal, so it seems like an iframe is the best (only?) way to do that, but I’m finding that the onComplete callback is getting fired infinitely using this code:

$('a[rel="modal"]').colorbox({
  href: function() {
    return $(this).attr( 'href' );  
  },
  title: function() {
    var title = $(this).attr( 'title' );
    return title != 'undefined' ? title : false;
  },
  rel: 'nofollow',
  iframe: true,
  onComplete:function() {
    alert( 'complete' );
    $.colorbox.resize({
      innerHeight: ( $('iframe').offset().top + $('iframe').height() ),
      innerWidth: ( $('iframe').offset().left + $('iframe').width() )
    })
  }
});

Because it’s generic, I’m also trying to dynamically resize the modal to the content itself. If I don’t specify something, I end up with an iframe that’s collapsed upon itself. I know I’m missing something here, but I’m not sure what it is.

I should add that the page loading inside the frame also includes the Colorbox script as well as the script containing the code above. I’ll have to check whether that creates some kind of inescapable wormhole.

Any help would be much appreciated.

UPDATE

It looks like the iframe doesn’t exist when onComplete is fired. I didn’t expect that, so I could definitely use some advice now. 🙂

Answer 1

Not sure if this will be any help to you now, but I ran into the same issue with colorbox looping. It ended up being an issue with the value of the 'href' attribute. (I had been referencing an element id without having 'inline' : true set.)

Does it work if you replace the function being called in the 'href' attribute with a static location? If that has no contents it might be why your iframes don’t exist.