resize iframe based on src content

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

resize iframe based on src content

Post by Luke »

I am trying to re-size an iframe based on the actual content of its src so that no scrollbars are necessary. I am decent with client side stuff, but I have not been able to figure this one out... I've tried a hundred combination of things and nothing seems to work. The problem seems to come from the fact that the parent document doesn't know the content of the iframe before it is rendered... I can't figure out how to render it first and then adjust height. Anybody have any idea where I am going wrong?

Code: Select all

           $(function(){ // this function runs when this document is ready
                $("iframe").load(function(){ // this function is supposed to run when the iframe is loaded
                    var iframe = window.frames[$(this).attr("name")]; // get the iframe in question
                    var height = iframe.innerHeight;
                    alert(height); // does nothing
                    $(this).height(height); // set the iframe height to this height
                });
            });
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: resize iframe based on src content

Post by Kieran Huggins »

I'd put that js in the iframe itself - it can tell it's own document length and then instruct the iframe object in the parent frame to resize.

Should work, as far as I can tell.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: resize iframe based on src content

Post by Luke »

Wow... great idea. 8O :)
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: resize iframe based on src content

Post by Luke »

This did the trick!

(I put this in the iframe src file)

Code: Select all

 
$(function(){
    if (top.location != self.location) {
        var height = $("body").height();
        iframe = top.document.getElementById("ssRemoteWindow");
        $(iframe).height(height + 20);
        $(iframe).attr("scrolling", "no");
    }
}
 
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: resize iframe based on src content

Post by Kieran Huggins »

wicked! I wasn't sure it would even work, but you nailed it :-)
Post Reply