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

Get help for TinyWebGallery, the best image gallery. The forum is also home for the Joomla JFUploader, TWG Flash Uploader and the Wordpress flash uploader.
It is currently 20. Oct 2017, 05:30

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 23 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: 9. Oct 2015, 23:59 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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/


Top
 Profile  
 
PostPosted: 10. Oct 2015, 02:18 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 10. Oct 2015, 05:20 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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?


Top
 Profile  
 
PostPosted: 10. Oct 2015, 23:07 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 10. Oct 2015, 23:55 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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"]


Last edited by ibzr8 on 11. Oct 2015, 00:14, edited 1 time in total.

Top
 Profile  
 
PostPosted: 11. Oct 2015, 00:11 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 11. Oct 2015, 00:16 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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?


Top
 Profile  
 
PostPosted: 11. Oct 2015, 00:31 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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!


Top
 Profile  
 
PostPosted: 11. Oct 2015, 00:58 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 11. Oct 2015, 01:39 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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!


Top
 Profile  
 
PostPosted: 11. Oct 2015, 10:23 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 11. Oct 2015, 11:20 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 11. Oct 2015, 12:25 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
PostPosted: 11. Oct 2015, 17:42 
Offline

Joined: 9. Oct 2015, 23:11
Posts: 25
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!


Top
 Profile  
 
PostPosted: 11. Oct 2015, 20:52 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10497
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


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 23 posts ]  Go to page 1, 2  Next

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
cron
Powered by phpBB® Forum Software © phpBB Group

phpBB SEO