Question

I have an iframe with an button that when clicked expands a list. I want the height of that iframe to adjust once the button is clicked. Here is the code I have in the iframe:

     <script>
$(function() {
    $("#field12593102_1").click(function() {
        window.parent.adjustIFrameHeight();
    });
});
</script>

The code in the parent frame is the following:

    function adjustIFrameHeight(){
$('.childframe').css('height', function(index) {
  return index +=400;});
};

I know that the parent frame code works because I have tried it without a call to the function but it does not work as it is now.

Answer 1

You need to use the 2nd argument of the function called by css()

function adjustIFrameHeight(){
$('.childframe').css('height', function(index,value) {
  return value + 400;});
};

The 1st argument is the index of the current element inside the jQuery-object, not the current property(width in this case).

You may also use:

function adjustIFrameHeight(){
    $('.childframe').css('height', '+=400');
    };