Dynamic iframe height depending on hide/show

Question

I've got a form which contains some hidden fields that are only shown depending on the answer to a Yes/No radio button question.

This form is used on multiple external website using an iframe, therefore are on a different domain.

How can I change the height of the iframe depending on if these hidden field are shown or not. The way they are shown/hidden is using jquery show/hide in a separate scripts.js file. E.g

 $('#show').click(function(){
     $('#additional_fields').show('fast'); 
});

$('#hide').click(function(){
   $('#additional_fields').hide('fast'); 
});


<div id="additional_fields" style="display:none;"> hidden fields here
</div>

iframe that contains the above:

<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/>

UPDATE

Ive managed to get it to work using the following

$("#idIframe", top.document).css({ height: 1750 });

however, this only works when using the same domain.

Are you wanting to call up from the page in the frame or call down from the frameset to the page ? — Mark Broadhurst, Feb 18 '13 at 13:42

Darren · Answer 1 · 2013-02-18T15:19:45.913

0

Give an ID to your iframe and use the jQuery height function:

$('#show').click(function(){
      var newHeight = $("#idIframe").height() + 50;
      $("#idIframe").height(newHeight);
      $('#additional_fields').show('fast');   
});

$('#hide').click(function(){
      var newHeight = $("#idIframe").height() - 50;
      $("#idIframe").height(newHeight);
    $('#additional_fields').hide('fast'); 
});

Demonstrating how to change the height of the iframe:

http://jsfiddle.net/aZxRn/

edited Feb 18 '13 at 15:19

answered Feb 18 '13 at 13:43

Darren

68,902
24
138
144

Should I add this within the page thats the source of the iframe or within the page that contains the iframe? – user1961082 Feb 18 '13 at 13:50
@user1961082 in the file with the show and hide buttons. (Or an external JS file). jQuery should be able to find the element "iframe" – Darren Feb 18 '13 at 13:52
Still doesn't seem to work. I don't get any js errors either, the height just stays at 1000. – user1961082 Feb 18 '13 at 15:14
@user1961082 - I have edited my post, can you retry? Also check the JS fiddle I provided. – Darren Feb 18 '13 at 15:20
Nope, still no luck. It's strange because it doesn't give any errors either. If I do `alert($("#idIframe").height());` it returns null – user1961082 Feb 18 '13 at 15:25
If I do an alert after `$('#additional_fields').show('fast'); ` then I notice this appears before the fields physically appear on the page, could this be why? Should they all appear before we calculate the height? – user1961082 Feb 18 '13 at 15:32
FYI it works if I use `$("#idIframe", top.document).css({ height: 1750 });` but was hoping I wouldn't have to set it manually – user1961082 Feb 18 '13 at 15:39

palaѕн · Answer 2 · 2013-02-18T17:43:10.893

0

$('#show').click(function () {
    $('#additional_fields').show('fast');
    $("#idIframe").height($("body").height());
});

$('#hide').click(function () {
    $('#additional_fields').hide('fast');
    $("#idIframe").height(0);
});

edited Feb 18 '13 at 17:43

answered Feb 18 '13 at 13:46

palaѕн

72,112
17
116
136

Should I add this within the page thats the source of the iframe or within the page that contains the iframe? – user1961082 Feb 18 '13 at 13:50
within the page that contains the iframe. – palaѕн Feb 18 '13 at 13:52
Still doesn't seem to work. I don't get any js errors either, the height just stays at 1000. – user1961082 Feb 18 '13 at 15:11
FYI it works if I use `$("#idIframe", top.document).css({ height: 1750 });` but was hoping I wouldn't have to set it manually – user1961082 Feb 18 '13 at 15:35

score 0 · Answer 3 · answered Feb 18 '13 at 14:21

0

you will need to use the context option in order to call up to the frameset.

$('#show').click(function () {
    $('#additional_fields').show('fast');
    $("iframe",window.document).height(150);
});

$('#hide').click(function () {
    $('#additional_fields').hide('fast');
    $("iframe",window.document).height(0);
});

The reason for this is by default Jquerys context is set to the document of the current frame, so you need to set the context manually.

answered Feb 18 '13 at 14:21

Mark Broadhurst

2,675
23
45

Still doesn't seem to work. I don't get any js errors either, the height just stays at 1000. – user1961082 Feb 18 '13 at 15:12

score 0 · Answer 4 · answered Feb 20 '13 at 10:36

The only way, I believe, is to use postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) to send the height of the content to the parent window.

The thing is that the parent page would need to listen to the message, so this will work only if you have some control over it.

algorhythm · Answer 5 · 2013-02-20T11:00:27.853

0

I've written an example that resizes an iframe while animating it's content. I think you should find your solution in my code:

http://algorhythm.de/tools/resizeable-iframe/

My solution is also only working if you are using the same domain for parent and iframe. It's because of the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy

edited Feb 20 '13 at 11:00

answered Feb 20 '13 at 10:52

algorhythm

8,530
3
35
47

1

It's nice, but won't work if parent and iframe are in different domains (as this fiddle demonstrates: http://jsfiddle.net/Q3X2r/). – strah Feb 20 '13 at 10:57
@strah OK, you can build a proxy implementation with PHP or use some JSONP, then you can use javascript from other domains... – algorhythm Feb 20 '13 at 11:05
Yes, a proxy or JSONP would work too, but they would require some server side scripting. – strah Feb 20 '13 at 11:24
1

shouldn't be a problem: http://stackoverflow.com/a/6036468/852866 It is supported by vast majority of browsers. – strah Feb 20 '13 at 12:47
This link is dead. 404. Next time try to post the code here instead – Stacknerd Jun 12 '16 at 18:10

Dynamic iframe height depending on hide/show

5 Answers5