Iframe-resizer apparently not responding to CSS driven checkbox resize events

[FriarBroccoli]

I have used your code to resize a header with buttons placed in an Iframe. You can see that setup here:
http://evolution-4-creationists.appspot.com/
but without your code yet.

I would like to use your code to also resize the menu on the left, which is also in an iframe. That menu is built around Ryan Seddon's: "Pure CSS collapsible tree menu" a simplified version of which can be seen here:
http://jsfiddle.net/Friar_Broccoli/jmw4L/

I've succeeded in getting your code to work for my menu to the extent that it resizes the frame (correctly) when I reload the page, however if I unfold part of the menu (causing the bottom of the menu to be hidden below the iframe) and then resize the browser window (which I presume fires the onresize() event) nothing happens. Only reloading the page causes the iframe to extend.

Can you suggest what I should be looking at here?

If the solution isn't obvious, and you're interested in examining my problem I would be happy to upload my best effort at getting your code to work on my future site above.

Thanks for your time.

[davidjbradshaw]

The problem with using absolute positioning is that it takes the content outside of the body tag, and it is this that we use to get the height. Have you tried the suggestions in the troubleshooting section, it contains a few suggestions on how to work around this problem.

The other issue is CSS changes are not going to be picked up by the DOM mutationObserver code, as the DOM doesn't change. This is something I had not considered and I'll as a click event listener to the window object to work around that, although that won't help if it's a hover event that causes the content to resize. The ultimate fallback is to set the interval option to -32 to force it to run instead of the mutationObserver.

So in summary try running with these options.

iFrameResize({
    log: true,
    heightCalculationMethod:'scroll',
    interval:-32
}

and also add this just before </body> in your iFrame HTML.

<div style="clear:both;"></div>

If it still doesn't work, post a live example online and I'll take a quick look.

[FriarBroccoli]

Adding the click event listener did the trick, it worked instantly. Your code has solved a set of problems I had expected to spend weeks working on. Thanks.

Two unimportant questions:

(1) Since I am not yet testing for ie8 (want to setup a VM with XP) I would like to know if I can just take that block of code that begins [if (!Array.prototype.forEach){] and throw it in near the top of a referenced *.js file and expect it to work as is, or would it need additional packaging?

A question of pure curiosity if you feel inclined to reply:

(2) I'm old (63) and have never really understood listener/callback coding (which may or may not be relevant to this question) but I had expected to have problems using two realizable iframes called from the same parent page, but the code appears to work flawlessly. How does the parent code [iframeResizer.min.js] know which child [iframeResizer.contentWindow.min.js] is calling back with it's size info? I presume two instances of the contentWindow code are being created? (Perhaps you could add a quick note in your documentation mentioning that multiple iframes are automatically handled.)

Thanks hugely. I will be sure to leave links back to your page in my js files.

[davidjbradshaw]

So I'm guessing you tried version 2.2.2 then.

To answer your questions.

1. Yep, it can go there, or anywhere before you make the call to iframeResizer().
2. There's only one instance of the code running and messages are all received on the window listener. If you look at the console log you can see the messages that are past between the two pages. The trick is that the first message is sent from the host page and this contains the ID of the iFrame, when the iFrame replies is includes this ID, so the host page know's where the request came from. The message also starts with an identifier for the script, so it knows to ignore messages from any other code on the page.

Hope that explains it.

[FriarBroccoli]

"So I'm guessing you tried version 2.2.2 then."

Yup.