Changing styles within an IFrame - JQuery

Question

I have a dialog type popup that shows when the user clicks a button. Within that popup is a form and once that submits I want to change the width and height of that popup using the following:

$(document).ready(function(){
// ON SUBMIT OPEN DIALOG WINDOW TO CREATE FLOOR PLAN FOR PRINTING 
    $("#submitit").click(function(){
        $(".form_wrapper").fadeOut();
        $("#sb-wrapper").css('width', '99%');
        $("#sb-wrapper").css('left', '7px');
        $("#sb-wrapper-inner").css('height', '350px');
        $( "#dialog-container" ).load( "./printing/display-print.php" );   
    });                     
}); 

Now once the popup opens it is within an iframe . The #sb-wrapper and #sb-wrapper-inner are outside of the iframe that is created. Now when running the above nothing happens. Except the form that is within the iframe fades out and the new data loads in the container within the iframe.

So my question is, how can I make this work together?

Answer 1

You have to use the contents() method:

$("#myiframe").contents().find("#myContent")

Source