asp.net - Resizing jQuery dialog div on iFrame content height change, where iframe contained in dialog

Question

I've a jquery dialog div. The div contains an iFrame to another ASP.Net page on the same domain. The iframe source page also contains jquery accordion control. Whenever the dialog is opened and accordion are expanded/collapsed, I need to resize the dialog box. Currently the contents are getting chopped off. Please note again that the dialog wraps the accordion within an iframe. I'm breaking my head against the wall to make things work. If somebody have a solution to this, then please help me out. Note: Everything is in same domain.

SOLVED See my ANSWER below.

Answer 1

You need to get the child iframe to talk to the parent window when the accordion is toggled.

$yourAccordion.on('open', function(e){
  if(window.top && window.top.resizeDialog)
     window.top.resizeDialog($(window).width(),$(window).height());
});

Then in your parent page, have a global function called resizeDialog

window.resizeDialog = function(w,h){
  $('#dialog').find('iframe').attr({
    width: w,
    height: h
  });
};

Note: You'll most likely need to account for animation timing etc. You could also include this in the step function of the jQuery animate method you use to open/close the accordion to make it a bit smoother.