Solved

dynamically resizing an iframe

Posted on 2011-02-16
3
266 Views
Last Modified: 2012-06-27
Hi Experts,

I have a webpage that contains an iframe that is restricted by the height/width of a parent div.

ie
<div class="mainframe" style="height:220px; width:196px">                
	<iframe class="myframe" src="login.php" scrolling="no" frameborder="0" width="100%" height="100%" >
	</iframe>
</div>  

Open in new window

The purpose of login.php is provide the user with a login form.
Within the form, there is a link for the user to register if they do not have a log in.
When they click register, I want the div to be resized to eg height:420px; width:296px
to accommodate the registration form.

How do I do this?

Thanks!
0
Comment
Question by:jagku
  • 2
3 Comments
 
LVL 15

Assisted Solution

by:Tomarse111
Tomarse111 earned 500 total points
ID: 34907707
First up stick an ID on your mainframe. Then add the script attached to your login.php ..

<div class="mainframe" id="mainframe" style="height:220px; width:196px">                
      <iframe class="myframe" src="test2.cfm" scrolling="no" frameborder="0" width="100%" height="100%" >
      </iframe>
</div>  
<script type="text/javascript">
	resize=function(){
		var div=parent.document.getElementById('mainframe')		
		div.style.height=500;
		div.style.width=500;		
	}
</script>
<body bgcolor="#FF0000">
<a href="javascript:void(0);" onclick="resize()">link</a>
</body>

Open in new window

0
 
LVL 15

Accepted Solution

by:
Tomarse111 earned 500 total points
ID: 34907723
Ok that was using my test data, this is using your data:

<div class="mainframe" id="mainframe" style="height:220px; width:196px">                
      <iframe class="myframe" src="login.php" scrolling="no" frameborder="0" width="100%" height="100%" >
      </iframe>
</div>  
<script type="text/javascript">
	resize=function(){
		var div=parent.document.getElementById('mainframe')		
		div.style.height=420;
		div.style.width=296;		
	}
</script>
<body bgcolor="#FF0000">
<a href="javascript:void(0);" onclick="resize()">link</a>
</body>

Open in new window

0
 

Author Closing Comment

by:jagku
ID: 34907911
Perfect!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding a countdown to HTA 12 92
Problem evaluating javascript equality expression 8 17
Link Anchor Not working 9 45
HTML editor custom button 3 51
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question