Question

I’m working on a user dashboard project where a user can interact with widgets (very similar to iGoogle dashboard). I’m using jQueryUI portlets to hold iframes. The problem I’m running into is that I would like to resize the iframe in real-time when the contents inside the iframe expand using jQuery animation. For example, I have a custom accordion control inside an iframe. When the user clicks on a panel to expand the accordion, I call the slideDown() function to show the content. When the slideDown() animation is complete, I resize the iframe based on the body’s new height. The result is the contents of the accordion slide down until they go out of bounds of the widget during the slide animation. Once the animation is complete, the resize takes care of the new widget height and everything looks good. This is pretty choppy animation and I would like to resize the iframe so it expands to the iframe’s body height during the slideDown() animation. What can I do to expand the iframe based on the body height during the slide animation?

Here is the code I’m currently using.

// This code gets fired on an accordion panel click event.
content.slideDown(100, function ()
{
    parent.expandContainer('panel1', $('body').height());
});     

// This code resides in the parent page hosting the iframes.
function expandContainer(elementId, height)
{
    $('#' + elementId).children('.content').find('iframe').css('height', height + 'px');
}   

Answer 1

From my research iframes cannot be expanded. They must be given a fixed width & height.