I am dealing with a dialog type popup that appears when a button is clicked by the user. Inside this popup, there is a form that needs to be submitted in order to change the width and height of the popup using the following code:
$(document).ready(function(){
// Triggering a dialog window after form submission to create a 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" );
});
});
When the popup opens, it is contained within an iframe. The elements #sb-wrapper and #sb-wrapper-inner are located outside the iframe. However, running the above code does not produce the desired result. Only the form within the iframe fades out and new data loads into the container within the iframe.
My question is, how can I get these components to work together effectively?