dynamically resizing an iframe

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!
jagkuAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tomarse111Connect With a Mentor Commented:
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
 
Tomarse111Connect With a Mentor Commented:
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
 
jagkuAuthor Commented:
Perfect!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.