?
Solved

dynamically resizing an iframe

Posted on 2011-02-16
3
Medium Priority
?
276 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

770 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