Notifications
Clear all

External workaround with auto height and and resize on element resize not working


Posts: 2
Topic starter
(@jlayhue)
New Member
Joined: 5 days ago

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!

3 Replies
TinyWebGallery
Posts: 523
Admin
(@admin)
Administrator
Joined: 13 years ago

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

Reply
1 Reply
(@jlayhue)
Joined: 5 days ago

New Member
Posts: 2

@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

Reply
TinyWebGallery
Posts: 523
Admin
(@admin)
Administrator
Joined: 13 years ago

Can you share your full config and maybe also an url? 

Best regards,

Michael

Reply