Dynamic iframe height depending on hide / show
I have a form that contains some hidden fields that only show up depending on the answer to a Yes / No button question.
This form is used on multiple external sites using iframe, so they are on a different domain.
How do I change the height of an iframe depending on whether these hidden fields are shown or not. The way to show / hide is using jquery show / hide in a separate scripts.js file. for example
$('#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 above:
<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/>
UPDATE
I managed to get it to work using the following
$("#idIframe", top.document).css({ height: 1750 });
however, this only works when using the same domain.
source to share
Give ID
your iframe and use jQuery function height
:
$('#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');
});
Demonstration on how to change the height of an iframe:
source to share
you will need to use the context option to invoke 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 default reason for this is that the Jquerys context is set to the document of the current frame, so you need to set the context manually.
source to share
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 point is that the parent page will have to listen to the message, so this will only work if you have some control over it.
source to share
I wrote an example that resizes an iframe while animating it. I think you should find your solution in your code:
http://algorhythm.de/tools/resizeable-iframe/
My solution also only works if you are using the same domain for parent and iframe. This is due to the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy
source to share