Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

dynamically resizing an iframe

Posted on 2011-02-16
3
Medium Priority
?
280 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 15

Assisted Solution

by:Tomarse111
Tomarse111 earned 2000 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

604 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