Question

Hey i have a iframe that i am sizing to its content with the following script. I want to show and hide this iframe with two buttons but when its hidden the iframes width and height is not calculated and so when i click the show button it does not show because the width and height are still set to 0.

I am pretty new to jquery and javascript so help would be greatly appreciated.

<script language="JavaScript">
$(document).ready(function(){
    $(".ShowFrame").click(function(){
        $("#iframe1").show();
    });
    $("#iframe1").hide();
});

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
</script>

Answer 1

You could call the resize function on the ShowFrame click.

$(document).ready(function(){ 
    $(".ShowFrame").click(function(){ 
        $("#iframe1").show(); 
        autoResize("iframe1"); 
    }); 
    $("#iframe1").hide(); 
});