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 24. May 2018, 10:08

All times are UTC + 1 hour [ DST ]




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

Joined: 28. Mar 2018, 19:10
Posts: 7
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: 10804
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: 7
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: 10804
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: 7
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: 10804
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: 7
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 25 times ]
20180517-1.png
20180517-1.png [ 194.74 KiB | Viewed 25 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: 10804
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: 7
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 16 times ]
Top
 Profile  
 
PostPosted: 19. May 2018, 01:47 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 10804
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: 7
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: 10804
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  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 12 posts ] 

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 | Datenschutz/ Privacy policy