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 18. Oct 2018, 12:04

All times are UTC + 1 hour [ DST ]




Post new topic Reply to topic  [ 14 posts ] 
Author Message
PostPosted: 15. May 2018, 18:08 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
Hi

I have a page with several items. At the foot of each item is an expanding list (via VSS). The expanding list is not being taken into account when the iframe is being used.

I am using the advanced iframe pro

I have also tried to add 500(px) to the foot to take this into account, but it does not work.

url: http://woodshomes.co.uk/woods-estate-agents/

Just do a search for anything in any area...

The shortcode for the results (properties shown is below). You will notice that the HIDE/SHOW SUMMARY on the last row of properties does not show correctly when you press the button. The iframe goes larger which creates a scroll area and the final button does not show properly either.

[advanced_iframe securitykey="my_sec_key" use_shortcode_attributes_only="true" src="" width="100%" height="100" id="wd_results" scrolling="no" resize_on_element_resize=".wd_desc" name="wd_search_results" onload_scroll_top="true" hide_page_until_loaded="true" content_styles="margin-top:0px;" iframe_content_styles="background-color: #fff;" onload_resize="true" resize_on_click="100" enable_responsive_iframe="true" resize_on_ajax="500" resize_on_ajax_jquery="true" onload_resize_delay="500" transparency="true" additional_height="500" ]

Help please...


Top
 Profile  
 
PostPosted: 16. May 2018, 12:31 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
I just was at the site. When I click on HIDE/SHOW SUMMARY is does expand fine.
Have you changed something already?


Top
 Profile  
 
PostPosted: 16. May 2018, 18:48 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
The top line expands and contracts, it's the second row. Although It expands, it creates a scrollbar on the right.

I want the depth of the iframe to be calculated including the expanded content on the last row...

Cheers


Top
 Profile  
 
PostPosted: 16. May 2018, 20:36 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
Are you able to put a container around the whole result?
Currently you have resize_on_element_resize=".wd_desc" which is a single element only. Also there is a row container. So you can try ".w3-row"

Best, Michael


Top
 Profile  
 
PostPosted: 17. May 2018, 15:57 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
Can put a container (div or otherwise) around everthing in the iframe if needed.

What would the syntax change for the shortcode be?

Would it take into account the total (deepest) height of all the expanded details links? E.g. the bottom row has 3 links that are varying in height - it would need to take the height of the deepest in all cases... or... is there an easier way than this? Can't use fixed heights for the iframe as this is a responsive website and sometimes there are 3 across, sometimes 1 across etc depending on the device...

Cheers


Top
 Profile  
 
PostPosted: 17. May 2018, 16:15 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
give the surrounding div a unique id and use this for the resize to element resize. If the inner content changes the outer one is changing as well. And this should then be triggering the resize again.

And if this does not work we can use the external workaround js. file. This has an improved resize detection. But we should only try this if the basic setup does fail.

Best, Michael


Top
 Profile  
 
PostPosted: 17. May 2018, 16:48 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
yes added this - tried before...

The body element for the iframe content has an ID = wd_propertysearch

Shortcode is:

[advanced_iframe securitykey="xxx" use_shortcode_attributes_only="true" src="" width="100%" height="100" id="wd_results" scrolling="no" resize_on_element_resize=".wd_propertysearch" name="wd_search_results" onload_scroll_top="true" hide_page_until_loaded="true" content_styles="margin-top:0px;" iframe_content_styles="background-color: #fff;" onload_resize="true" resize_on_click="100" enable_responsive_iframe="true" resize_on_ajax="500" resize_on_ajax_jquery="true" onload_resize_delay="500" transparency="true" additional_height="500" ]

1. It does not show the last line of buttons

2. When you click hide / show, the iframe expands (good) but just shows scroll bars in the iframe (not good and not good for mobile experience) plus users does not know to scroll within scroll etc.

Thought the 'whole' iframe should expand to fit the content...?


Attachments:
20180517-2.png
20180517-2.png [ 85.89 KiB | Viewed 101 times ]
20180517-1.png
20180517-1.png [ 194.74 KiB | Viewed 101 times ]


Last edited by nampara17 on 18. May 2018, 11:47, edited 1 time in total.
Top
 Profile  
 
PostPosted: 17. May 2018, 17:40 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
no - please define an extra div. The body is the worst element as it does not behave like a normal div. This is why the external workaround even adds an additional one!.

Best, Michael


Top
 Profile  
 
PostPosted: 18. May 2018, 12:07 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
Ok, so added some more divs around the content... and it kind of works a bit better.

Now the issue is with the mobile. When viewed on a iphone the search box at the top is only 1px deep (height). This shows correctly on the chrome emulator but on the true device just shows a 1px height...?

works ok on the emulator though in chrome?

http://woodshomes.co.uk/woods-estate-agents/

These are the errors in the chrome console:

Uncaught ReferenceError: aiScrollToTop is not defined
at HTMLIFrameElement.onload ((index):800)
onload @ (index):800

(index):853 Uncaught TypeError: instance is not a function
at HTMLIFrameElement.<anonymous> ((index):853)
at HTMLIFrameElement.dispatch (jquery-1.10.2.min.js:5)
at HTMLIFrameElement.v.handle (jquery-1.10.2.min.js:5)


Attachments:
photo-mobile-render.jpg
photo-mobile-render.jpg [ 26.32 KiB | Viewed 92 times ]
Top
 Profile  
 
PostPosted: 19. May 2018, 01:47 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
On the options page you can include the ai.js to the footer (default) and in the header. If you get this error please choose the it is not included into the footer.

Also the plugin has a browser detection, So if you need different settings fir mobile please use a different setup for this devices.

Best, Michael


Top
 Profile  
 
PostPosted: 22. May 2018, 20:09 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
Tried for 4 - 5 hours - EVERYTHING!

Nothing works. Can get everything working on a DESKTOP, go to the mobile phone or ipad - NOTHING.

Giving up me thinks. The iframe pro just does not work with this scenario unfortuneatly.


Top
 Profile  
 
PostPosted: 22. May 2018, 22:14 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
ios is very often a problem as apple does ignore a lot of settings. Then often the page itself has to be modified.

So one option could be that for IOS you use the browser detection and display a link for the users instead of including an iframe.

The last thing you can try is to use the external workaround even on the same domain.
Means to include the ai_external to the other page and configure it there. The reason to do this that the resize part on the same domain works differently as on the external domain. As on the external domain the Javascript is included directly I have more power to modify/measure the page.

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message The first example shows you this.

You also have an error still on the page:
Uncaught ReferenceError: aiResizeIframe is not defined. This happens if ai.js is not loaded yet.

I also don't understand why you have this on your page:

<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/includes/scripts/jquery.ba-resize.min.js'></script>

Because
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/includes/scripts/jquery.ba-resize.min.js'></script>

should be on http://woodshomes.co.uk/catalogue/xml/propertydetailsv5.php

Also you have included the ai.js at the bottom and not at the top like I have recommended in my last post. Maybe the loading on desktop is different as on IOS and therefore this does make a difference!
Also on your page the "hide show details" section is not there anymore. Have you changed something there?

Best, Michael


Top
 Profile  
 
PostPosted: 29. May 2018, 16:36 
Offline

Joined: 28. Mar 2018, 19:10
Posts: 8
TinyWebGallery wrote:
ios is very often a problem as apple does ignore a lot of settings. Then often the page itself has to be modified.

So one option could be that for IOS you use the browser detection and display a link for the users instead of including an iframe.

The last thing you can try is to use the external workaround even on the same domain.

Means to include the ai_external to the other page and configure it there. The reason to do this that the resize part on the same domain works differently as on the external domain. As on the external domain the Javascript is included directly I have more power to modify/measure the page.

http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message The first example shows you this.

You also have an error still on the page:
Uncaught ReferenceError: aiResizeIframe is not defined. This happens if ai.js is not loaded yet.

I also don't understand why you have this on your page:

<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/includes/scripts/jquery.ba-resize.min.js'></script>

Because
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/js/ai_external.js'></script>
<script type='text/javascript' src='http://woodshomes.co.uk/wp-content/plugins/advanced-iframe/includes/scripts/jquery.ba-resize.min.js'></script>

should be on http://woodshomes.co.uk/catalogue/xml/propertydetailsv5.php

Also you have included the ai.js at the bottom and not at the top like I have recommended in my last post. Maybe the loading on desktop is different as on IOS and therefore this does make a difference!
Also on your page the "hide show details" section is not there anymore. Have you changed something there?

Best, Michael


The links to the external files are included via the plugin in the woodhomes.

The propertydetailsv5.php IS the file that needs to be shown in the iframe, so assumed we do not want to add it to that file as well as the plugin seems to add the refererences itself.

Actually totally confused on how to use the plugin now! Thought it was straightforward, but now not sure what to include and where. So:

* Both the main WP site with the plugin and the file to be shown in the iframe are on the same domain
* The included PHP file (propertydetailsv5.php) has a form header (that is not shown when submitted)
* Once submitted the same PHP file (propertydetailsv5.php) is displayed in the second iframe on the page (lower) but this time with code does not show the search form
* The top search form does not display properly Nor does the lower results

Have tried everything...

Content of the top search area with the iframe pro content = propertydetailsv5.php

[advanced_iframe securitykey="key_here" use_shortcode_attributes_only="true" src="http://woodshomes.co.uk/catalogue/xml/propertydetailsv5.php" onload_resize="true" width="100%" resize_on_element_resize="#wd_psearch" resize_on_element_resize_delay="200" target="wd_search_results" id="wd_newsearch" content_id=".ai-class-0" content_styles="" add_css_class_parent="true" scrolling="no" show_iframe_loader="true" hide_page_until_loaded="true" enable_responsive_iframe="true" resize_on_ajax="5" resize_on_ajax_jquery="true" transparency="true" iframe_hide_elements="h3#search_heading"]

When submitted the search shows the results (again as above stated, the same propertydetailsv5.php) in the SECOND iframe on the page with this:

[advanced_iframe securitykey="key_here" use_shortcode_attributes_only="true" name="wd_search_results" id="wd_search_results" src="" width="100%" scrolling="no" resize_on_element_resize="#wd_psearch_results" hide_page_until_loaded="true" content_styles="" iframe_content_styles="background-color: #fff;" onload_resize="true" resize_on_click="100" enable_responsive_iframe="true" resize_on_ajax="5" resize_on_ajax_jquery="true" transparency="true" additional_height="1500" iframe_hide_elements=".wd_hide"]

Code:
+-----------------------------------------------------------------------------+
|                                                                             |
|   Woods Homes website home page                                             |
+-----------------------------------------------------------------------------+
| +-------------------------------------+ +-----------------------------------+
| |                                     | | ^                                 |
| |                                     | | |    Search area using the file:  |
| |                                     | | |    propertydetails^5.php        |
| |                                     | | |                                 |
| |      LOGO's                         | | | But just shows the search form  |
| |                                     | | |                                 |
| |                                     | | |    IFRAME PRO (#1)       +      |
| |                                     | | |                          |      |
| |                                     | | +                          |      |
| |                                     | |  NEEDS TO BE RESPONSIVE +-------> |
| |                                     | | +                          |      |
| |                                     | | v                          |      |
| |                                     | |                            |      |
| +-------------------------------------+ +-----------------------------------+
| +---------------------------------------------------------------------------+
| |  ^                                                  IFRAME PRO (#2)|      |
| |  |                                                                 |      |
| |  |                                                                 |      |
| |  |          SHOWS PROPERTIES FROM THE ABOVE SEARCH...              |      |
| |  |                                                                 |      |
| |  |                                                                 |      |
| |  |          Search RESULTS using the same file:                    |      |
| |  |          propertydetails^5.php                          <-------+      |
| |  |                                                                        |
| |  |          BUT not showing the search form as the                        |
| |  |          search has been started + just shows the                      |
| |  |          results of the search                                         |
| |  |                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  +                                                                        |
| |    NEEDS TO BE RESPONSIVE +-------------------------------------------->  |
| |                                                                           |
| |  +                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  |                                                                        |
| |  v                                                                        |
| |                                                                           |
| +---------------------------------------------------------------------------+
| +---------------------------------------------------------------------------+
| |                             FOOTER                                        |
| +---------------------------------------------------------------------------+
+-----------------------------------------------------------------------------+



Top
 Profile  
 
PostPosted: 1. Jun 2018, 17:29 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10904
I don't understand your setup.
you have 2 iframes on the same page?

can you enable on the options tab that your shortcode is checked. e.g. target="wd_search_results" does not exist as parameter.
Also resize_on_ajax="5" resize_on_ajax_jquery="true" are not needed if you use resize on element resize.

your shortcode looks much too complicated to me. As you said it is working fine on the desktop your option is to use the external workaround as there are pro options which maybe works on your IOS setup as well.

Enabling setting you find is not helpful if you don't understand what they do.

So the upper iframe is working properly?

Stuff like
content_styles="" iframe_content_styles="background-color: #fff;" do not work as they need a content_id settings that tells where to apply the styles.

So please start with the upper iframe first until it works how you like it. But as you are writing the problem is the height of the lower iframe. There I recommended already to use the external workaround by including the ai_external.js there. The resize on the same domain is the same for the free and the pro version. But the external workaround is more enhanced.

So please try this. the best way is to use a configuration file you include before the ai_external.js to have the optimal flexibility.

If the setup for IOS does not work because IOS simply behaves not like it should you can still use the browser detection to display an alternative page fir this users.

Best, Michael


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ] 

All times are UTC + 1 hour [ DST ]


Who is online

Users browsing this forum: Google [Bot] and 5 guests


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:
powered by phpbb | Datenschutz/ Privacy policy