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

Hi,

Is there any way to use plugin for responsive mobile-friendly websites?

To illustrate what I mean, please compare two examples - 1) a regular table that is responsive and 2) table from iframe

1) regular responsive table
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-responsive/

2) table in Advanced iframe
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test/

No. You have set a fixed width of 1000. Therefore the iframe has a width of 1000 px!

So if you e.g. set responsive iframe to true or a width of 100% the iframe scales as well!

Best, Michael

Hi Michael,

Thank you. As you recommended, I enabled onload_resize="true" enable_responsive_iframe="true" and removed "height" and "width" attributes. However, the result became worse.
here is the code

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-table-header/" use_shortcode_attributes_only="true" id="a1" onload_resize="true" enable_responsive_iframe="true" show_part_of_iframe="true" show_part_of_iframe_x="1" show_part_of_iframe_y="380" show_part_of_iframe_width="1450" show_part_of_iframe_height="100" show_iframe_loader="true"]

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pa/" use_shortcode_attributes_only="true" id="a2" onload_resize="true" enable_responsive_iframe="true" show_part_of_iframe="true" show_part_of_iframe_x="0" show_part_of_iframe_y="378" show_part_of_iframe_width="1450" show_part_of_iframe_height="190" show_iframe_loader="true"]

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pp/" use_shortcode_attributes_only="true" id="a3" onload_resize="true" enable_responsive_iframe="true" show_part_of_iframe="true" show_part_of_iframe_x="0" show_part_of_iframe_y="378" show_part_of_iframe_width="1450" show_part_of_iframe_height="190" show_iframe_loader="true"]

The result is at http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test/

1. Desktop version - only 1st column is shown and layout is broken
2. Mobile version - same as for the desktop


What should I change in the short code to make the iframe page look exactly the sam eas http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-responsive/ - both in destop and mobile?


If I keep the "height" and "width" attributes, then result is still bad:

1. On the desktop version 3 vertical scroll bars appeared. How to get rid of them?

2. In the mobile version it still does not fit the phone screen but rather shows as a regular table and one has to scroll horizontally to see everything.

What would be the correct code to properly show the table both in desktop and mobile versions?

You are using the wrong feature. "Show only a part of the iframe" should only be used if you don't have access to the other page. You are on the same domain. Therefore you can use all features .

Lets start with showing the table only:

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-table-header/" use_shortcode_attributes_only="true" id="a1" width="100%" height="600" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act"]

Please check If the table is still formated properly as onload_show_element_only does remove all other elements really from the code and depending on the css it might look wrong. It it looks strand than we have to hide all other elements like header footer and e.g.the title.

Best, Michael

Thank you, Michael.

It's a big difference! How can I remove scrolling bars from iframes?

http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test/

or here

http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-iframes-full-table-or-row/

I tried either scrolling=”false” or scrolling=”no” - none helps.

2) Also, I noticed that in mobile version table header is not shown. Normally, in mobile mode it should be repeated above each table cell entry, otherwise it's hard to understand where does this belong to and what it means.

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" use_shortcode_attributes_only="true" id="a1" scrolling=”false” width="100%" height="100%" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act"]


Shortcode for the 1st page:

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-table-header/" use_shortcode_attributes_only="true" id="a1" scrolling=”no” width="100%" height="600" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act"]

Shortcode for the second page

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pa/" use_shortcode_attributes_only="true" id="a2" scrolling=”false” width="100%" height="600" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act"]

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pp/" use_shortcode_attributes_only="true" id="a3" scrolling=”false” width="100%" height="600" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act"]

Because you use the wrong quotation marks.

scrolling=”no” -> wrong
scrolling="no" -> correct .

Sometimes this is needed because 100% is rounded the wrong way by the browser...

Best, Michael

Great, you are right! It's works fine now

Also, I noticed that in mobile version table header is not shown. Normally, in mobile mode it should be repeated above each table cell entry, otherwise it's hard to understand where does this belong to and what it means. Do you know how to make sure to show the table headers?

Next step would be to show a header and only a first and last rows in idreame.
Should I create child classes in .table-act class and give their unique names to all rows and the header or there is another way how to tag rows and header and refer to them from iframe shortcode?
Thanks!

Only the first and last + the header?

You can hide certain elements where you have a selector. So it depends on your table. you could e.g select the first, 2nd and last element and than with not() you select the others which are hidden than.
so how does your tables look like?

You should only mark the ones you don't want if there is no other way for you to identify the rows you don't like.

Best, Michael

So far looks bad, I think I am doing it in a wrong way. Could you post an example of the correct code?

You suggested this, but I do not know how to do this:
- "You can hide certain elements where you have a selector." - I am not sure how I can do this and what the selector is"
- "You could e.g select the first, 2nd and last element" - I do not know how to select the first, 2nd and last element
- "with not() you select the others which are hidden than." - I am not sure what is not() and how to use not()

My source table looks like this:

<table class='table-act' cellspacing='0'> <!-- cellspacing='0' is important, must stay -->

<tr><th class='header-act'><center>Model</center></th><th>Valves/Torque</th><th>Application</th><th>Material</th></tr>

<tr class='pa'><td><a href="http://ch1.2biz.ca/blog/category/pa-series-pneumatic-actuator"><img src="http://ch1.2biz.ca/my-stuff-here/uploads/img/pa-series-pneumatic-actuator.jpg" alt="PA Series pneumatic actuator" width="100" height="100" /></a><br />
<center><strong>PA-Series</strong></center></td><td>Ball up to 6"<br />
Butterfly up to 24"<br />
Torque: up to 40660 in-lbs</td><td>Industrial Process<br />
Submerged<br />
Bleach / water washdown</td><td>Rislan-coated aluminun</td></tr>

<tr class='pp'><td><a href="http://ch1.2biz.ca/blog/category/pp-series-pneumatic-actuator"><img class="alignnone size-full wp-image-4015" src="http://ch1.2biz.ca/my-stuff-here/uploads/img/pp-series-pneumatic-actuator.jpg" alt="PP-series pneumatic actuator" width="100" height="100" /></a><br />
<center><strong>PP-Series</strong></center></td><td>Ball up to 6"<br />
Butterfly up to 6"<br />
Torque: up to 1335 in-lbs</td><td>Industrial Process<br />
Minimal use of metal</td><td>Glass-filled Polyamide</td></tr>


<tr class='pg'><td><a href="http://ch1.2biz.ca/blog/category/pg-series-pneumatic-actuator"><img class="alignnone size-full wp-image-4013" src="http://ch1.2biz.ca/my-stuff-here/uploads/img/pg-series-pneumatic-actuator.jpg" alt="PG-series pneumatic actuator" width="100" height="100" /></a><br />
<center><strong>PG-Series</strong></center></td><td>3-Way Ball up to 4"<br />
Torque: up to 2834 in-lbs</td><td>180-Degree operation<br />
Industrial Process<br />
Bleach / water washdown</td><td>Rislan-coated aluminun</td></tr>

<tr class='p3'><td><a href="http://ch1.2biz.ca/blog/category/p3-series-pneumatic-actuator"><img class="alignnone size-full wp-image-4011" src="http://ch1.2biz.ca/my-stuff-here/uploads/img/p3-series-pneumatic-actuator.jpg" alt="P3-series pneumatic actuator" width="100" height="100" /></a><br />
<center><strong>P3-Series</strong></center></td><td>Ball up to 6"<br />
Butterfly up to 10"<br />
Torque: up to 8850 in-lbs</td><td>Corrosive<br />Submersed<br />Off-shore</td><td>316 Stainless steel</td></tr>

</table>



Will greatly appreciate your help!

Please define bad? Because right now 3 iframes are shown where the content of the table is visiable. Which was your requirement 1.

I cannot give you a better example as I still don't know what you want to show exactly. Why do you have 3 iframes? What exactly should be shown in the iframes?

I know how your table looks like as I can simply look into the page.

Please note that the normal support does not contain that I do the whole setup for you.

Best,
Michael

About jquery selectors. On the help tab you find the section: Small jQuery help. there I have explaind what selectors are and also some examples.
In your case (if you want to select selected rows only) I recommend that you marks the rows you want to hide with a class.
Than you can simply add this class as selector in the hide elements field.

Best, Michael

About the jQuery selector help. Not is not explained there yet. But if you mark the rows you don't like you don't need this.

Best, Michael

What I want to do is simply show on this page http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-iframes-selected-rows/ a modified table containing arbitary elements from the source table, e.g. the header and 1st and last rows of the table located here http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/.

Why I use three iframe codes? Because I have hove no idea how to show three elements using one code.

Defining bad: It means that instead of selected rows the whole page is shown twice. Example is here
http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/test-for-tables-iframes-selected-rows/

Shortcode that I use is here:

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" use_shortcode_attributes_only="true" id="a1" scrolling="no" width="100%" height="100%" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".header-act" enable_lazy_load="false"]

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" use_shortcode_attributes_only="true" id="a2" scrolling="no" width="100%" height="100%" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only="pa" enable_lazy_load="false"]

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" use_shortcode_attributes_only="true" id="a3" scrolling="no" width="100%" height="100%" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only="p3" enable_lazy_load="false"]

Please show me what has to be changed in that code in order to create a table that would contain only the header, and 1st & last rows of the source table.

Thank you!

Hi,

You only need one shortcode. Is the table dynamic or static? Because the rows 2-4 have different classes. If this is the case you can simple hide this rows with

iframe_hide_elements="tr.pp, tr.pq"

[advanced_iframe securitykey="6ef523c1208ec972c864bb0ae301b595fa34382e" src="http://ch1.2biz.ca/products/service-stuff-pages-not-shown-in-navigation-but-used-for-iframes-etc/pneumatic-actuators-all/" use_shortcode_attributes_only="true" id="a1" scrolling="no" width="100%" height="100%" onload_resize="true" enable_responsive_iframe="true" onload_show_element_only=".table-act" iframe_hide_elements="tr.pp, tr.pq"]

Best, Michael