Resize to content height

You should use the lazy load only. Not in combination with the tabs settings.
Like I show in example 28.
And where do I have to click to see it?

Best, Michael

Michael,

Sorry I tried something else yesterday (that’s why you didn’t find where to click) because it’s not working with lazy load…

You can see on the page https://www.anatole-menichetti.fr/websites iframes in tabs are not working.

The content of this page is:

[tabby title=”L’Agenda du dessin contemporain”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.ledessincontemporain.com” width=”100%” height=”800″ use_shortcode_attributes_only=”true” onload_resize=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” show_iframe_loader=”true”]

[tabby title=”Catherine Henriette – Photographe”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.catherinehenriette.com” width=”100%” height=”800″ use_shortcode_attributes_only=”true” onload_resize=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” show_iframe_loader=”true”]

[tabby title=”Eudes Menichetti – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.eudes-menichetti.com” width=”100%” height=”800″ use_shortcode_attributes_only=”true” onload_resize=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” show_iframe_loader=”true”]

[tabby title=”Hélène Muheim – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.helene-muheim.fr” width=”100%” height=”800″ use_shortcode_attributes_only=”true” onload_resize=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” show_iframe_loader=”true”]

[tabby title=”Les potos c’est la famille”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.lespotoscestlafamille.com” width=”100%” height=”800″ use_shortcode_attributes_only=”true” onload_resize=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” show_iframe_loader=”true”]

[tabbyending]

Thank’s again Michael,

Best,

Anatole

You are missing a main thing! You have not set any unique id’s. Many things are generated for each id and also the callbacks from the remote pages need a unique id as well.

So currently some Javascripts are overwritten and all callback do not know which iframe to update!

Start with one iframe and e.g. name it iframe1 ;).
Then you need to tell in the external page this id like shown here:
https://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-auto-height-and-css-modifications
var iframe_id = “example1”;

remove onload_resize=”true” as this is for the local domain only and also remove show_iframe_loader=”true” for now until the lazy load works.

and on the first visible tab don’t use enable_lazy_load_manual=”auto”

Best, Michael

Something else!!!!

do you have Something in your WordPress that removes comments from the html page? Like a cache or page optimizer?

Because the lazy load works the way the the code is inserted to the page in comments and added to the page when needed. And in the source of your page this not there!

Best, Michael

Michael,

I did what you said and it’s still not showing any iframe…

Script in each external website (placed just before the workaround script):

<script>
var iframe_id = “iframeX”;
var updateIframeHeight = “true”;
</script>

Content of the page https://www.anatole-menichetti.fr/websites :

[tabby title=”L’Agenda du dessin contemporain”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.ledessincontemporain.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” enable_lazy_load=”true” id=”iframe1″ enable_external_height_workaround=”true”]

[tabby title=”Catherine Henriette – Photographe”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.catherinehenriette.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” id=”iframe2″ enable_external_height_workaround=”true”]

[tabby title=”Eudes Menichetti – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.eudes-menichetti.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” id=”iframe3″ enable_external_height_workaround=”true”]

[tabby title=”Hélène Muheim – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.helene-muheim.fr&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” id=”iframe4″ enable_external_height_workaround=”true”]

[tabby title=”Les potos c’est la famille”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.lespotoscestlafamille.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” enable_lazy_load=”true” enable_lazy_load_manual=”auto” id=”iframe5″ enable_external_height_workaround=”true”]

[tabbyending]

One again, thank’s for all your support.

Best,

Anatole

See my post about the comments! this is important!

And remove the lazyload from the first visible tab to see that the auto height does work!

Best, Michael

Michael,

I didn’t understand what you said about a post about comments.

I removed lazy load from every iframe and it’s now working!
So I didn’t need the pro version for that – now it’s working, I tried one more time with the hide_tab and visible_tab attributes but these attributes do not work… – but it’s not a big problem ??

There is just two problems more:
the fourth tab iframe (helene muheim) height is incredibly high that’s really weird
The fifth tab do not resize…

Hi,

Lazy loading does not work because a plugin you use (often caching plugins) remove <!– –> which are comments. Lazy loading is based that its iframe is stored a comment and then loaded from there.
This is why it not not working for you.

There are heights send back but they are not correct as on hidden tabs this behaves differently on every browser.

The hidden tab stuff does work but also needs timeouts to set properly I have not seen on your setup yet.
e.g .
var onload_resize_delay = 1000;

You should really check who does remove the comments on your page as lazy loading is really cool as it also speedup your page as only the stuff views is loaded.

And I also you need more features of the pro version. E.g. resize on element resize on your 5th tab if you go over the images…

Best, Michael

And I have another idea. Use also the resize on element resize feature on one of the tabs. Because this features does check every x seconds if the height of an element has changed. So if on the hidden tabs the height is measured wrong because it is hidden it should ge a different height as soon as it is visible.

Best, Michael

Michael,

Thank’s again for your support. I tried with resize on element resize for the fourth et fifth tabs. It’s great but when a link is clink inside these iframes, it show an alert which say that there is a problem with id, it could not be send into the url of the page.

I tried lazy loading without cache plugin and with comments enable but it’s not working…

Script in 3first tabs external websites :

<script>
var iframe_id = “iframe4”;
var updateIframeHeight = “true”;
var write_css_directly = “true”;
var resize_on_element_resize = “#page”;
var resize_on_element_resize_delay = “100”;
</script>

Script in 2last tabs external websites :

<script>
var iframe_id = “iframe4”;
var updateIframeHeight = “true”;
var write_css_directly = “true”;
var resize_on_element_resize = “#page”;
var resize_on_element_resize_delay = “100”;
var iframe_url_id = “ai_id”;
</script>

Content of the page https://www.anatole-menichetti.fr/websites :

[tabby title=”L’Agenda du dessin contemporain”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.ledessincontemporain.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” id=”iframe1″ enable_external_height_workaround=”true” scrolling=”no” show_iframe_loader=”true” resize_on_element_resize=”#page” resize_on_element_resize_delay=”100″]

[tabby title=”Catherine Henriette – Photographe”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.catherinehenriette.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” id=”iframe2″ enable_external_height_workaround=”true” scrolling=”no” show_iframe_loader=”true” onload_scroll_top=”true” resize_on_element_resize=”#page” resize_on_element_resize_delay=”100″]

[tabby title=”Eudes Menichetti – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.eudes-menichetti.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” id=”iframe3″ enable_external_height_workaround=”true” scrolling=”no” show_iframe_loader=”true” onload_scroll_top=”true” resize_on_element_resize=”#page” resize_on_element_resize_delay=”100″]

[tabby title=”Hélène Muheim – Artiste”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.helene-muheim.fr&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” id=”iframe4″ enable_external_height_workaround=”true” scrolling=”no” show_iframe_loader=”true” onload_scroll_top=”true” resize_on_element_resize=”#page” resize_on_element_resize_delay=”100″ pass_id_by_url=”ai_id”]

[tabby title=”Les potos c’est la famille”]

[advanced_iframe securitykey=”e039d5b50935c2fe390118c5977510910d586700″ src=”https://www.lespotoscestlafamille.com&#8221; width=”100%” height=”800″ use_shortcode_attributes_only=”true” id=”iframe5″ enable_external_height_workaround=”true” scrolling=”no” show_iframe_loader=”true” onload_scroll_top=”true” resize_on_element_resize=”#page” resize_on_element_resize_delay=”100″ pass_id_by_url=”ai_id”]

[tabbyending]

Thanks again and sorry for disagreement…

Best,

Anatole

Remove
var iframe_url_id = “ai_id”;
This is only needed if you want automatic ids – But you already set the id before.

You have iframe4 as id for all? It should be 1-5.

Remove
resize_on_element_resize=”#page”
resize_on_element_resize_delay=”100″
from the shortcode. This is a settings for an iframe on a local domain!

Remove write css directly. You have not set any css modifications and if you would and want to use this feature you have to add the Javascript into the head section as otherwise the css cannot be written to the head.

Tab 4 seems to work for me btw.

And I still don’t see any comments. Maybethere are none but e.g. https://lespotoscestlafamille.com/?ai_id=iframe5 does have comments shown.

Best, Michael

Is you problem now solved?