Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to resize iframe based on option selected in src document

  1. #1
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to resize iframe based on option selected in src document

    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
    Last edited by Puneet Kankane; 08-01-2008 at 12:46 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    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.

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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:
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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.

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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?
    Last edited by Medyman; 08-01-2008 at 01:53 PM.

  7. #7
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  8. #8
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

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

  9. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Yes, it's possible. Hopefully, this should keep you going:
    Code:
    <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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  10. #10
    Join Date
    Aug 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •