Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.

Here is my code:

<script src="//code.jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
 function ChangeHeightF1() 
 {
    $("#inneriframe").css({"height":"350px;"});
    alert('The height was changed!');

 }
</script>
<div id="outerdiv">
    <iframe src="/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>

Here is the code of the button which is in the content of the iframe:

<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>

So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.

Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?

Thanks in advance!

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.

Here is my code:

<script src="//code.jquery./jquery-1.10.2.js"></script>
<script type="text/javascript">
 function ChangeHeightF1() 
 {
    $("#inneriframe").css({"height":"350px;"});
    alert('The height was changed!');

 }
</script>
<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>

Here is the code of the button which is in the content of the iframe:

<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>

So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.

Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?

Thanks in advance!

• javascript
• jquery
• html
• css
• iframe

3 Answers 3

You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.

$(":button").click(function(){

    $('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});

})

This should work. If you want to re size back to previous height, let me know.

http://jsfiddle/ko3pyy8c

<script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

     $( document ).ready(function() {

        $('#more').click(function(){
            $('#inneriframe').animate({height:'500px'}, 500);
            $('#more').text('Go Back');
         });
    });

</script>

<style type = "text/css"/>
    #inneriframe {
         height: 350px;
        overflow: hidden;
    }
</style>

<div id="outerdiv">
    <iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
<a href="#" id="more">Change Height</a> 

it can help you

 <a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>

by using jquery

    $('a').click(function(){
    $('iframe').css('height','600px');
});