How to resize iframe based on option selected in src document

[Puneet Kankane]

Hi All,

According to my requirement I need to increase the size of iFrame, when I select any option from dropdown list. I show a DIV, which would increase the size of the iframe. and vice versa.

Can anybody guide me as to how can I do that.

Thanks in advance.

Cheers!!
PK

[rangana]

Could you kindly rephrase your problem. The iframe's height will adjust depending on the dropdown list? Is it what you're trying to do? How is the div going to affect it? I'm confused

[Puneet Kankane]

When the src document loads in iFrame, there is a section of form within one div which is hidden by default. but in the same form I have a feature in which if I select an option from the dropdown I ask for more information from customer. Which will make the DIV to be visible. Which in turn will cause the size of the form/page/document to increase. so even iFrame has to readjust its size so that it can show the new elements present in the DIV.

So DIV affects the size of iFrame to show extra element of the form.

Hope this makes some sense.

[rangana]

Makes me baffled more.

Let me quote you pieces by pieces as I'm totally lost on what you were trying to do. I believe that you have the code for your div's show/hide display. Your problem must lie on how to control your iframe's height. If so, then use this code:

document.getElementById('iframeID').style.height='300px'; // Set the iframe's height to your heart's desire

Basically, the code above will keep you moving, in case you're stumped get back with a code or a link to the page in question, and we'll be glad to help you.

[Puneet Kankane]

rangana

thanks for ur help I will try this. But one ques pops in. can a onchange event of select element in the src page(inside iframe) can cause the height of iframe (parent) to be changed.

Pls let me know.

[Medyman]

I don't know how to do this. But let me rephrase for Rangana and anyone else's benefit b/c I think I get it.

So the OP has an iframe into which he is loading a form. The form has some some fields that are hidden by default. Selecting certain options form a drop down reveals those hidden fields. Now, on a normal page, showing a hidden field would simply move anything below it down. Same thing happens in the form within the iframe. But, because the size of the iframe is hard coded, the bottom of the form is now cut off. I'm assuming the OP doesn't want the iframe to have a scrollbar.

So, what he needs is some way to adjust the height of an iframe from within the iframe via a select element.

Make sense?

[Puneet Kankane]

Medyman... thanks for making my life easy. I very well mean this. but lack of iFrame knowledge let me down on explaining the problem itself.

It would be nice if anyone can help me.

[Puneet Kankane]

rangana any idea how this can be done... is it possible or not.

[rangana]

Yes, it's possible. Hopefully, this should keep you going:

<script type="text/javascript">
window.onload=function(){
document.getElementById('opt').onchange=function(){
document.getElementById('myframe').style.height=this.value+'px';
}}
</script>
<select id="opt">
<option selected="selected">Change IFRAME height</option>
<option value="300">Change IFRAME height to 300px</option>
<option value="500">Change IFRAME height to 500px</option>
<option value="1000">Change IFRAME height to 1000px</option>
<option value="100">Change IFRAME height to 100px</option>
<option value="50">Change IFRAME height to 50px</option>
<option value="150">Change IFRAME height to 150px</option>
</select>
<br><br>
<iframe src="http://dynamicdrive.com/forums" id="myframe" style="border:0px;width:100%;"></iframe>

[Puneet Kankane]

rangana,

Let me try to make it even more simple for you.

The structure goes like this.

main.html
---- which has <iframe src="subscribeEmailBox.jsp" width="320px"></iframe>
---- some content

Now subscribeEmailBox.jsp (Which will be child of main.html)
---- has a form which can expand based on the selection made in one of the select box present inside subscribeEmailBox.jsp.

So basically I want to change the size of the iFrame in main.html when I select different options in subscribeEmailBox.jsp

Please let me know if this makes sense to you.

Thanks a lot.