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 22. Nov 2024, 16:43

This forum is readonly now. Please use the new forum if you don't find the answer to your question here. The new forum is at https://www.tinywebgallery.com/blog/forum/

View unanswered posts | View active topics


Board index » Advanced iframe » Advanced iframe support

All times are UTC + 1 hour [ DST ]



Post new topic Reply to topic  Page 1 of 2
  [ 17 posts ]  Go to page 1, 2  Next
  Print view Previous topic | Next topic 
Author Message
Asle
PostPosted: 19. Feb 2019, 14:36 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
I have a jQuery Datatables inside my iframe. The first time I load the page with the iframe it clips the height (see image).
On any resize, if I e.g. make the page narrower, it fixes the height (see image). How can I get the iframe height correct on first load?
https://biofokus.no/narin/

My shortcode:
Code:
[advanced_iframe use_shortcode_attributes_only="true" src="https://narin.biofokus.no/indexbio_sa.lasso" id="narinbio" enable_responsive_iframe="true" enable_external_height_workaround="true" width="100%" height="800" url_forward_parameter="ALL" scrolling="no" hide_page_until_loaded_external="true"]


My js on bottom of the iframe:
Code:
<script>
var iframe_id = "narinbio";
var element_to_measure_offset = 30;
var updateIframeHeight = "true";
var resize_on_element_resize = "#frame-content"
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "frame-content";
var iframe_content_styles = "overflow:hidden";
</script>   
<script src="https://biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=38"></script>


Attachments:
File comment: on resize ok height
iframe_resize.jpg
iframe_resize.jpg [ 60.4 KiB | Viewed 5572 times ]
File comment: on first load the iframe is clipped
iframe_first_load.jpg
iframe_first_load.jpg [ 48.1 KiB | Viewed 5572 times ]
Top
 Profile  
 
TinyWebGallery
PostPosted: 20. Feb 2019, 23:12 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
you can try to add a delay to the resize. maybe the page is not fully loaded when the first measurement is done..

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 21. Feb 2019, 11:12 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
I tried a delay of up to 15 seconds but still it does not show the bottom navigation until I resize both width and height.
Code:
onload_resize_delay="15"

https://biofokus.no/narin/

Now I notice that this is not a problem in Safari or Firefox. Only in CHROME. Any ideas about that? I also have problems with the page not working at all in Google Chrome on Android.
Top
 Profile  
 
TinyWebGallery
PostPosted: 21. Feb 2019, 11:29 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
15 is 15 ms. So please try e.g. 500 or something like that.
Top
 Profile  
 
Asle
PostPosted: 21. Feb 2019, 12:08 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Sorry, does not help. This is surely a problem only in Chrome. I have no problem in Safari or Firefox.
I removed it though now since other browsers take longer to load. But tested it and it did not render correct in Chrome. Emptied cache etc. to make sure.
Top
 Profile  
 
TinyWebGallery
PostPosted: 21. Feb 2019, 13:59 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
maybe chrome has a problem to measure the height. Maybe the pagination is for him in a not visible. can you set the height to e.g. 300. To check if chrome is resizing or if it is only resizing wrong...

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 21. Feb 2019, 15:32 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Tried 300px also. No difference. Also tried to put "ifram_content" DIV outside the javascript. No differnce in Chrome. Safari and Firefox does this correct height.
Top
 Profile  
 
TinyWebGallery
PostPosted: 21. Feb 2019, 17:33 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
means it resizes still to a specific height but not the correct one. Can you set your post message to debug so the events are shown?

Best, Michael
Top
 Profile  
 
TinyWebGallery
PostPosted: 21. Feb 2019, 17:38 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
strange - because if I measure the height in chrome with the devtools it is 110 pixels more.... when I measure the ai-wrapper...
Top
 Profile  
 
TinyWebGallery
PostPosted: 21. Feb 2019, 17:48 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
and wait! where have you specified the delay? in the shortcode? this is wrong!

you have to do this before the ai_external.js

var onload_resize_delay=100;

or set it on the "external workaround" tab -> Resize/ css modification delay -> save and reload everything properly.

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 21. Feb 2019, 20:31 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Thanks but it did not help. I tried to add "300" and up to "500". This is very strange since it only happens in Chrome, not in Firefox, Safari.
Top
 Profile  
 
TinyWebGallery
PostPosted: 22. Feb 2019, 01:11 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
you have to add the correct value!

var onload_resize="300";
!=
var onload_resize_delay=300;

_delay and also no " is important!

The differences between the browser is rendering speed and also the times where events are fired! therefore the delay is often the key!

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 22. Feb 2019, 13:23 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Hi Michael,
I think this did the trick when I entered the correct code. I want it to be a low delay as possible so I entered

Code:
var onload_resize_delay=100;


That should be 1 sec? Not much when the rest of the page is very big and I am loading almost 2000 records into DataTables. Have to fix that to make it fetch from server dynamically. But that is my problem and not Advanced iframe!
Top
 Profile  
 
Asle
PostPosted: 22. Feb 2019, 17:49 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Is there a way to make the height of the iframe always fill the viewport?

I have my iframe with DataTables. When I filter the result is e.g. only one line, the iframes height is small. The lightbox that now reads the viewport of the parent so it positions correctly. But it the iframe is much smaller than the viewport it is clipped. How can I make the iframe stretch to 100% of the viewport always?


Attachments:
File comment: iframe reads the viewport and displays centered image
short_iframe.jpg
short_iframe.jpg [ 153.08 KiB | Viewed 5511 times ]
File comment: I display only one line in the table and the iframes height is short
only_one_table_line.jpg
only_one_table_line.jpg [ 93.02 KiB | Viewed 5511 times ]
Top
 Profile  
 
TinyWebGallery
PostPosted: 24. Feb 2019, 00:31 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
100 is 100 ms ! so 0.1 sec.
about the viewport. This depends on the lightbox! Seems it is only using the available space.
The auto height cannot detect this as the lighbox is on a extra layer.

You can check for lightboxes that also work in an iframe properly.

Best, Michael
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 2
  [ 17 posts ]  Go to page 1, 2  Next

Board index » Advanced iframe » Advanced iframe support

All times are UTC + 1 hour [ DST ]

Who is online

Users browsing this forum: No registered users and 19 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:
cron
powered by phpbb | Datenschutz/ Privacy policy