Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I am using Tabby Tab plugin (https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs) to show tabs on my pages. However, when I am placing the iframe shortcode within the tab it shows nothing. Can you check this please?

I put the code within this page in the tab "Electric Actuation". However, it just shows empty screen
http://ch1.2biz.ca/products/product-page-template/

Yes it does. The problem is that hidden elements have a size of 0 for the browser. I have 2 solutions implemented for this which are shown at:

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/auto-height-of-hidden-iframes

I recommend that you try the example 28 first as you can setup this very easy.

Please check the demos for working examples. All main features are shown there in a working example.

Best, Michael

Thank you!

I tried both codes
using example 17, I created this page - http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-17/
and using example 28 - http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-28/

Example 28 works better but has mobile issues - i.e. iframes are shown but ignoring "iframe_hide_elements restrictions " - i.e. all elements (even hidden) of the table are shown.

The codes that follows example 28 are here:

[tabby title="Features"]
[tabby title="Technical"]
[tabby title="Electric Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="e1" frameborder="0" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/electric-actuators-all/" 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" onload_show_element_only=".table-act-e" iframe_hide_elements="tr.electromni, tr.a" scrolling="no" enable_responsive_iframe="true"]

[tabby title="Pneumatic Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" 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" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no" enable_responsive_iframe="true"]

[tabbyending]


2) When I tried to use example 17, it was worse. Maybe because I do not know how to properly refer the tabs.
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-example-17/

The two tabs where the iframes are referenced are "Electric Actuation" and "Pneumatic Actuation".
What happens is when I use enable_lazy_load="false" - "Electric Actuation" is shown and "Pneumatic Actuation" - is not (or vise versa depending on which tab is opened first - if you open one first, another does not load. If you reload page and open another, then the first that earlier showed does not this time). In mobile version same story as with Example 28.

Here are the shortcodes:

[tabby title="Features"]
[tabby title="Technical"]
[tabby title="Electric Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="e1" frameborder="0" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/electric-actuators-all/" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true" tab_visible="#Features" tab_hidden="#Electric-Actuation" enable_responsive_iframe="true" onload_show_element_only=".table-act-e" iframe_hide_elements="tr.electromni, tr.a" scrolling="no"]

[tabby title="Pneumatic Actuation"]
[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" width="100%" height="20" use_shortcode_attributes_only="true" onload_resize="true" tab_visible="#Features" tab_hidden="#Pneumatic-Actuation" enable_responsive_iframe="true" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no"]

[tabby title="Order"]
[tabbyending]

What should I change in the shortcodes for the Examples 28 and 17 to make sure that both tables are shown both in desktop and mobile modes each in its tab correctly following "iframe_hide_elements restrictions"?


Thank you!

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" id="p1" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" 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" onload_show_element_only=".table-act" iframe_hide_elements="tr.pa" scrolling="no" enable_responsive_iframe="true"]

does hide tr.pa

I checked in the code and this is hidden like is should.
So example 28 does work for me.

Best, Michael

You should also set that the iframe is hidden until it is modified. Than you don't see the unmodified page first...

Best, Michael

Hi Michael,
"I checked in the code and this is hidden like is should.
So example 28 does work for me."

I wrote that it does not hide in mobile version, not desktop version. In desktop, it works for me too. In mobile version, it shows a raws, including those marked as hidden. Please check.

Hi Michael,

Do you know how to make this code working?

You have css for mobile responsive design. Means that there is different css and maybe different settings also.
So the whole page has to be evaluated. This is quite time consuming.

Best, Michael