I followed the instructions using the external workaround to resize the iframe on page load. That is all working great.
My iframe (which I also have access to the code for) changes height based on the interaction with the user. The height changes because it is a list of locations shown on a map. For example, there may be 10 locations shown on the map and 10 locations listed under the map. If the user selects a different radius on the map using a form that is in the iframe, the number of locations on the map may change to 50. Then, 50 locations would be listed under the map, which would increase the content height in the iframe.
I've followed the instructions here: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/resize-on-element-resize (Example 27)
I added a class and id of the same value on my outer content to catch the height increase. The class/id is "ghost-creativ-map-wrapper".
I consistently get this error in the console: "The configuration of "resize_on_element_resize" is invalid. The specified element "#ghost-creativ-map-wrapper" could not be found or accessed. Please check your configuration."
I've tried entering the "#ghost-creativ-map-wrapper" and "ghost-creativ-map-wrapper" in the field:
Advanced Settings -> Resize on element resize
If I change that same field to "body", I get a different error that states that entering information in that field will not work for content in external iframes, but I believe that is contrary to the documentation. The exact error is this, for that scenario:
"You have enabled the resize of the iframe for pages on the same domain. But you use an iframe page on a different domain. You need to use the external workaround like described in the settings. Also check the next log. There the browser message for this error is displayed."
Any help is greatly appreciated!
What do you mean with class/id - both are set? an id needs to be unique...
If you enter something to the administration it is saved to ai_external.js. Make sure if you do changes to delete the browser cache so it is loaded again! #ghost-creativ-map-wrapper should be the right setting if your element has the id="ghost-creativ-map-wrapper"
The 2nd error message is because you where not using enable_external_height_workaround="true" in your shortcode. If you not do this the shortcode assumes you do this setting on the same domain.
Best regards,
Michael
@admin thanks for the feedback. I'll give it a try!
Regarding the class/id are both set, I meant that I set both the class and the id to the same value of "ghost-creativ-map-wrapper". I know the id has to be unique. I was trying to use the class instead of id when I couldn't get it working.
Thanks again!
Josh
Can you share your full config and maybe also an url?
Best regards,
Michael
@admin the site is https://purpleone.org/safe-place-finder
This is the contents of my config file:
var updateIframeHeight = "true"; var keepOverflowHidden = "false"; var write_css_directly = "true"; var resize_on_element_resize = "#ghost-creativ-map-wrapper"; var resize_on_element_resize_delay = 10000; var iframe_url_id = "ai_id"; var iframe_hide_elements = "#iframe-header,#iframe-footer"; var iframe_content_id = "#iframe-content"; var enable_external_height_workaround="true"; var usePostMessage = true; var domainMultisite = true;
This is my shortcode:
[advanced_iframe src="https://safejourneyerie.web.app/locationMap" width="100%" enable_responsive_iframe="true" resize_on_element_resize="#ghost-creativ-map-wrapper" resize_on_element_resize_delay="10000" add_document_domain="true" enable_external_height_workaround="true"]
Picture of the shortcode attached in case it doesn't load properly as text.
The height adjustment works on the first load, but it doesn't adjust the height when the iframe content height changes.
Hi,
your shortcode only needs nothing from the resize. This is all done in the external.js
If I check your code the settings are AFTER the ai_external.js. It needs to be before. And you have to defined way too many things.
You can actually define all the settings in the administration and none in the file directly if you have one iframe only.
I don't see any post message. Please enable this is in the administration and set it to debug there! then you see what is happening.
I would also not work with a custom id. Use the default advanced_iframe everywhere for a start.
Best regards,
Michael
Got it working. Thanks so much for your help!
