iFrame issue with responsive style installed

hello, i see … have you try to open page-community.php into your template folder, and where:
// heightCalculationMethod: 'bodyOffset', // If iframe not resize correctly, un-comment (or change with one of others available resize methods)
change
bodyOffset
try one of others, checking what can may work:
https://github.com/davidjbradshaw/iframe-resizer#heightcalculationmethod
???

Thanks much for awesome support!

Worked with:
heightCalculationMethod: ‘grow’ quite wonderfully.

Another question, this theme uses a parallax image header and it doesn’t seem to work within iFrame right now. Could you point me in the right direction to remedy that?

Thanks again. ??

Sorry for the multiple questions but, what is the process for making the “Home” button on the forum exit the iFrame? Currently when clicked, it creates a second instance of WP below the main header.

Thanks!

“Home” button on the forum exit the iFrame? Currently when clicked, it creates a second instance of WP below the main header.

change the link in the related menu, that it seem now has been fixed, because when i click it at time of this post, it redirect me to the nice home without problems, so i assume it is fixed?

theme uses a parallax image header and it doesn’t seem to work within iFrame right now.

there is a little problem, i’ve debug into your page that this is:

	<script type="text/javascript">
		var et_animation_data = [];
	</script>

this is the result into your output code of the page forum. The array that indicate to the parallax how to animate is empty.
while, into any other page, the same var is an array that contain values in this way:

		<script type="text/javascript">
		var et_animation_data = [{"class":"et_pb_fullwidth_header_0","style":"fade","repeat":"once","duration":"200ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_signup_0","style":"zoom","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_search_0","style":"slide","repeat":"once","duration":"1000ms","delay":"200ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_blog_0","style":"fade","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"}];
	</script>

… due to the fact the js console not report any error, so i can’t imagine why it happen, and i should lost time to see where and why it happen on your template, that i do not know, the problem, in the wild, could be resolved, adding (follow read all post)

<script type="text/javascript"> var et_animation_data = [{"class":"et_pb_fullwidth_header_0","style":"fade","repeat":"once","duration":"200ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_signup_0","style":"zoom","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_search_0","style":"slide","repeat":"once","duration":"1000ms","delay":"200ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_blog_0","style":"fade","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"}];
	</script>

manually into page forum, in the way that should not be added before the other empty, but after, because if not the array reset another time to empty. Better would be, know exactly why it not work. It should depend by some template setting, that can be different for each page in this theme?
Except the code about iframe, and this empty array that should be instead filled by necessary data, all seem perfectly equal.
So in the wild, this may will temp fix your problem, but after, if the parallax is modified via theme settings, this should be updated with new values other time.

I do not if will work, in theory yes, so this may will fix:
open your page-community.php
search for line:
add_action('wp_head','wp_w3all_add_ajax');
immediately after, add the follow:

 function function_force_set_et_animation_data(){
   echo 
		'<script type="text/javascript">
		var et_animation_data = [{"class":"et_pb_fullwidth_header_0","style":"fade","repeat":"once","duration":"200ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_signup_0","style":"zoom","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_search_0","style":"slide","repeat":"once","duration":"1000ms","delay":"200ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"},{"class":"et_pb_blog_0","style":"fade","repeat":"once","duration":"1000ms","delay":"0ms","intensity":"50%","starting_opacity":"0%","speed_curve":"ease-in-out"}];
	</script>';
}

add_action('wp_footer','function_force_set_et_animation_data', 99);

but the best, would be this question for your theme author:
why the js var on wp footer
var et_animation_data
isn’t filled, even if added, when i add manually a custom page? or something like this …

EDITED:
re-looking to code, that as said i do not know, i’m not sure that this can be really the solution because i do not know if the var refer to the parallax.
It seem to me the unique thing different on output code, so maybe it is (may not).

• This reply was modified 7 years, 2 months ago by axew3.

Thanks again for the support.

If you try the “home” button on Chrome, is still creates the second instance. I am talking about the home button in the board index on PHPbb, not of the main website.

One last issue I can’t solve. On some pages of the forum, the footer is fine, but on most of the forum, you will notice a big space under the forum (between the forum and the footer on the main site). Any way you know of to remove that space for all pages of the forum so iFrame fits nicely always without extra gaps like below?

Ok yes i see …
the problem, is that i do not see any error, and comparing code i’ve note nothing different on pages output.
i can’t imagine what can cause this, it can depend by several things i ignore, because i do not how the theme you use build pages.

So let try another:
can you try to assign to iframe div the class container (that i another time, ignore what will cause) in this way:
open page-community.php
search for:

<!-- START iframe div -->
<div class="">

change into

<!-- START iframe div -->
<div class="container">

so may also check some other setting in this, way using another resize method if the one you’re use still not fix the gap you say (that i can’t see because not registered and i do not see any forum list)
what happen?

ps OR probably better:
search for:

<!-- START iframe div -->
<div class="">

change into

<!-- START iframe div -->
<div id="main-content">
<div class="container">

so search for

</div>
<!-- END iframe div -->

change into

</div></div>
<!-- END iframe div -->

same above, check with other height calculation method when changed if not fit, or comment out to use the default

???

Thanks for the help!
Although, none of the code solved the issue.

When I added
<!– START iframe div –>
<div id=”main-content”>
<div class=”container”>

It made the community page a boxed layout with a vertical thin line on the right throughout page , even though in PHPbb style options it is set to ‘fluid’ or full width. Also tried just
<!– START iframe div –>
<div class=”container”>
And fixed vertical line but made page boxed layout, and also the gap still exists.
The fix made the very top header shrink link on regular site too.

The parallax issue is not that important for the community page. More importantly, we are trying to make it functional with minimal issues and we are almost there.

The two main issues are:
1. The “Home” button next to “Board Index” link on top right of PHPbb is creating another instance of the entire site beneath the top header (try it out in Chrome.)
2. The large gap is not present on most pages, but as soon as you click into a topic, the huge gray space exists between the websites footer and iFrame or PHPbb footer. How can we make sure those are joined throughout the forum pages?

Also, tried different heightCalculationMethods but the only one that works the best is ‘grow’. Setting back to default made the iFrame cut off except for the top.

To clarify, I wasn’t talking about WordPress theme for main site, I was talking about PHPbb theme that was installed in ACP. The PGPbb ‘theme’ or style has a parallax header, sorry for the confusion. Want to make sure were on the same page.

ah! … no we definitively were not on same page!
So i still have not understand the problem

Another question, this theme uses a parallax image header and it doesn’t seem to work within iFrame right now.

sorry the problem in understanding this, but what mean not work? what should do?

W3, thanks for the support!

I am still have problem with iframe resizer on the board pages. The issue is that it has a big gap between footer of PHPBB and WP footer.
Right now I have set: heightCalculationMethod: ‘grow’ which seems to work well except for the board pages, which has the gap. I can get rid of the gap by setting to different heightCalculationMethod but then the main forum page has glitchy scroll issue.

Please login at: https://futureprimitive.org/staging/community/
Username: test
Password: fptest

Main page looks great and works normal (scroll is good), but you can recreate issue by clicking on the first board “Episodes”. Scroll down and you’ll see big gap.

I believe heightCalculationMethod: ‘grow’ needs to stay since that is the only method that allows the scroll on main page to not be glitchy. I tired all other methods and this is the only one that works the best, except for the gap issue. Please help!

Thanks,
Justin

can’t see the forum after login! It redirect to home and i can’t load correctly the page at moment.

Did you try different browser? it’s working for us on multiple browsers.

Hi W3,
I was hoping you could try logging into the forum again to take a look at the issue. We’ve made the site live so the new login location is at:
https://futureprimitive.org/community/
Username: test
Password: fptest

Thank you!