Hi,
About the delay - if 1 sec are needed the this means your content is loaded later.
About not hiding elements on the same domain: As there is no delay in this part of the implementation you can use the external workaround where this is supported.
About "You are still using iframe communication from the free version. Please switch to postMessage communication to get all possible features." - Just above you see
"Info: Currently selected communication channel: iframe. See here what this means."
if you click on iframe -> you get directly to the setting! (Set it to debug for now!)
if you click on "here" -> you get to the documentation where this is explained.
The "only" thing you have to do is first to insert the script:
<script src="https://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js"></script>
in the page IN the iframe. this is the part I cannot help you.
At "Resize/ css modification delay" below you enter your 1s !! because this is what you needed also for the other implementation.
Read the help at "5. Done!" There some debugging instructions can be found!
Then you can configure the hiding of elements on the advanced tab - the settings with a save icon are saved to ai_external.js.
Best regards,
Michael
Hi Michael,
Thanks for your points above.
I have now set the 'Use postMessage for communication' option to debug.
I have placed the script in the header for the entire site and also in both of the iframe scripts used now.
Under the 'External workaround' tab > 'Resize remote iframe to content height', I have chosen 'external' and also tried 'yes' for the Resize remote iframe, but neither work at all.
To be honest, this all seems like a bit too much to get things working correctly, so can I ask, if it's possible to open any external pages in the main site content, rather than the iframe. That way I can try to use the standard implementation (not external workaround) which at least seems to adjust the height correctly. Then I do not have to worry about hiding the header and footer either.
So this page: https://staging8.pagodasecurity.co.uk/training/
loads the iframe calendar, then when an item is hovered over, it displays a message saying 'Select Options'. When this is clicked, rather than loading the new page within the iframe is it possible to load it in the main browser window instead?
That would greatly simplify things, and I can revert back to when at least the height adjustment was working.
Kind regards,
Steve
P.S. I am working on exactly the same domain for both the page being embedded and also the page that the iframe is being used on, so adding all the external workarounds just seems to be complicating matters and added loads more code to the site which is inevitably going to cause it to slow down with the additional scripts etc.
You have to following the instructions in your administration.
You included MY ai_external.js
<script src=" https://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/js/ai_external.js ">
You need to include YOURS. My link above is only an example how it looks like.
Basically it is including one script and then save the settings like described above.
Where is the Select Options popup? I only get a popup without any links over the calendar.
About the PS: Like mentioned before. This is needed because your page in the iframe is not fully loaded at the time the onload event is fired. I offer a workaround for this issue. And in the external workaround is a improved version of this. I will also add this for the same domain. Still this will be part of the next release...
Thanks for you patience and help.
I have corrected the Script link to use my site URL now and at least the auto height resize is working ok now.
The Select options shows up as a blue button when you hover over some blue text within the calendar. You may not have seen it as you would have had to scroll down to view it).
It might be easier to see in mobile view where it shows up underneath each date entry.
Do I need to add any code to the iframes themselves (e.g. enable_external_height_workaround="true") to get the hide elements to work with the external workaround?
enable_external_height_workaround="true" -> add this to your shortcode
hide elements. enter the id / classes of the element you want to hide at "advanced tab" -> modify the iframe -> Hide elements in iframe.
If you save this then it is also saved to your ai_external.js and after a browser cache refresh it should be hidden.
which elements you like to hide? e.g. if you like to hid the main header you need to add ".main_title" as this is a class.
I think you have a different issue with the popups. You need to add extra pixels at "Additional height" so the full popup is shown. And subtract this by a style again in the shortcode style="margin-bottom:-50px;" for example if you add 50.
Best regards,
Michael
here you see what I mean:
The iframe is bigger then it should be and then the text below this is moved up by a negative margin.
Best regards,
Michael
I had already entered all the ids and classes for the items I wanted to hide, but have resaved them now too.
The following css selectors have been included in the Hide elements in the iframe: .et-l--header .et-l--footer h1
I am attaching a screenshot to show what I am referring to. You'll notice the Select Options button, which when clicked opens another page within the iframe. This then also displays the website header and footer twice - once in the iframe and also the standard header on the main page that the iframe is embedded in.
