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 25. Nov 2024, 14:12

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. Nov 2018, 15:08 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
I bought the PRO version but my problems are still not solved. I am including a remote page where I have full control of the remote page. Still the IFRAME cuts the content and adds scroll.
On the main page I have this code:

Code:
[advanced_iframe use_shortcode_attributes_only="true" src="https://narin.biofokus.no/indexbio.lasso" id="narinbio" enable_responsive_iframe="true" enable_external_height_workaround="true" width="100%" height="800" url_forward_parameter="ALL" add_iframe_url_as_param="remote"]


On the remote page I have this code just before
Code:
</body>
.
Code:
<script>
var iframe_id = "narinbio";
var updateIframeHeight = "true";
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "#frame-content";
</script>   <script src="https://dev.biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=6"></script>


My structure on the remote page is:
#frame-content
#nav
#content
#right
/#frame-content

#right floats to the right. When I open the page the first time (https://dev.biofokus.no/narin/), #content and #right are empty. But still #nav gets cut off at the bottom and the IFRAME is 412px height. Don't know where that comes from. Sometimes the page shows correct. On the next page refresh everything is wrong again!

When I send in parameters I want the tallest of #content or #right to decide the IFRAME height. How do I do that. Check here:
Show one post: https://dev.biofokus.no/narin/?nid=4229
Show a free search: https://dev.biofokus.no/narin/?fritekst=myr

The problem is It suddenly works but usually fails with the height. It is important that one can do a search and the iframe adjusts height to the content.
Top
 Profile  
 
TinyWebGallery
PostPosted: 19. Nov 2018, 16:12 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
Hi,

it failed for me the first time also because of a js error. You the "add param to url" feature active.
The Javascript ai.js is loaded there too late. Go to the options and select that ai.js is included to the header.

After that it worked and already measured a height. But it seems you have some small additional margins which are not taken into account.
You can add an additional height of e.g. 10 px.

set
var element_to_measure_offset = 20;

after
var iframe_id = "narinbio";

you also have a overflow:auto at the <html>. This will generate scollbars also even when not needed.

add
var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";


Best, Michael
Top
 Profile  
 
Asle
PostPosted: 20. Nov 2018, 12:24 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Thanks for your reply Michael!
I am not sure I understand your suggestions.

I changed the code on the remote page to this:
Code:
<script>
var iframe_id = "narinbio";
var element_to_measure_offset = 20;
var updateIframeHeight = "true";
var enable_responsive_iframe = "true"
var hide_page_until_loaded_external = "true";
var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";
</script>   <script src="https://dev.biofokus.no/wp-content/plugins/advanced-iframe/js/ai_external.js?vs=6"></script>


In the OPTIONS I choose: Include ai.js in the footer -> NO

- The first time I open the page It shows the content: https://dev.biofokus.no/narin/
- When I select an option from: "Velg fylke" the frame does not expand and clips the bottom of the search box.
- If I have send in a parameter the iframe expands correctly: https://dev.biofokus.no/narin/?fritekst=kalkskog
- If I send in a parameter to show in "right" DIV it does not expand: https://dev.biofokus.no/narin/?nid=4102

So It does not understand the height of the right DIV, - understands the height of the "content" DIV when loaded initially, - does not get the height of "content" if internal ajax call.
Top
 Profile  
 
TinyWebGallery
PostPosted: 22. Nov 2018, 17:02 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
It the content does change because of an ajax call you need to enable resize on element resize.

See here for a full description:
http://www.tinywebgallery.com/blog/advanced-iframe-resize-to-content-summary

Hobe this helps. If you think I should improve this page even further please let me know.

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 22. Nov 2018, 21:46 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Thanks but still struggling.
Here is structure on the remote page:
#frame-content
#header
#content
#right

The first time I load the page it does not resize even if the #right is taller than the initial iframe size.
https://dev.biofokus.no/narin/

If I choose an option that expands the #content, the page expands. Another thing, there is always scroll bars, seems there is always some content padding?

Here is my [advanced_ifram] code now.

Code:
[advanced_iframe use_shortcode_attributes_only="true"
src="https://narin.biofokus.no/indexbio.lasso" id="narinbio"
enable_responsive_iframe="true"
enable_external_height_workaround="true"
width="100%" height="800"
url_forward_parameter="ALL"   
add_iframe_url_as_param="remote"
resize_on_element_resize="frame-content"]
Top
 Profile  
 
Asle
PostPosted: 25. Nov 2018, 20:53 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Any help?
Top
 Profile  
 
TinyWebGallery
PostPosted: 28. Nov 2018, 19:57 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
resize_on_element_resize="frame-content" needs to be set on the external workaround. Not in the shortcode.

If you have a problem at the first load you should try to add a delay of e.g .100ms. Maybe not everything is rendered properly.

About the scrollbars

var iframe_content_id = "body";
var iframe_content_styles = "overflow:hidden";

ist set but something else is setting overflow:auto after wards

So please set on the external workaround tab that css is included directly and change
var iframe_content_styles = "overflow:hidden";
to
var iframe_content_styles = "overflow:hidden !important";

But you should do this AFTER the resize does work!

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 29. Nov 2018, 18:09 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Hi,
Still not working. I added all the modifications you wrote. It seems the left DIV works fine and resizes the iframe. But the right DIV does not resize the iframe.

The first time I load the page it does not resize since the right DIV is tallest. There must be something wrong maybe with my right DIV since it does not make any height? When I open the page and do ajax calls selecting an option, the page resizes because of the left DIV. The right DIV has no effect. Any suggestions?
Top
 Profile  
 
Asle
PostPosted: 4. Dec 2018, 16:35 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Hi, I really wish I could get some help to get this to work. I have plans to use Advanced iframe on many pages but it is taking too long to get help. Do I have to look for another solution?
Top
 Profile  
 
TinyWebGallery
PostPosted: 4. Dec 2018, 22:28 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
Sorry for the delay. I currently have some spammers (50-100 messages a day...) in the forum so I unfortunately missed your new message.

I'll take a look. It seems the right div is not taken into the measurement. Even when I look with the browser tools of the browser.
the div has a position:absolute. Therefore it is not part of the surrounding divs. It is only counted in the body.

So please use a div structure if you like to display something on the right. Like float thing left and right...

you can use body as element do measure but then iframes don't shrink on all browsers.

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 5. Dec 2018, 18:14 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Hi,
Sorry to hear you have spamming problems! Forgive my impatience :-)

Yes, I see the problem now. I will try to fix the right DIV from absolute position to float.

Just another question (maybe). I am including an external page where I have no access to the external page. The external page is full responsive so I want the page to fill my page all the way down to the footer according to how the users has resized the page. If the user has a full height page on his screen, the external page should fill. Do I have to wrap the IFRAME in a 100% height DIV? I tried that but did not work.
Top
 Profile  
 
TinyWebGallery
PostPosted: 5. Dec 2018, 22:48 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
About your 2nd problem.

100% is not working here. But you can try 100vh
See
https://www.w3schools.com/cssref/css_units.asp

My plugin also supports calculations. so 100vh-200
is supported. this means 100% of the browser height - 200 for e.g. a header.

Does this help you?

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 6. Dec 2018, 14:52 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Thanks!
Where do I put "100vh-200" ?
I tried to put it in the code: [advanced_iframe scr="xxx" height="100vh-200"...] but that did not work.
Top
 Profile  
 
TinyWebGallery
PostPosted: 6. Dec 2018, 15:07 
Offline
Site Admin
User avatar

Joined: 1. Aug 2005, 12:53
Posts: 11232
it should be placed in the height.
please try 100vh-200px like written in the documentation.

Best, Michael
Top
 Profile  
 
Asle
PostPosted: 11. Dec 2018, 00:03 
Offline

Joined: 18. Nov 2018, 21:40
Posts: 50
Thanks Michael!
Works like a charm! Maybe I missed something in the docs. I am fixing the other problem, restructuring the layout away from position:absolute on the problematic DIV.

For now thanks again! :D
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 20 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