iFrame with the Milk Theme will not work.

8BitF0x

iFrame with the Milk Theme will not work.

Post by 8BitF0x »

Heyo, 8BitF0x here.

I just need to help setting up the iFrame with the Milk Theme for phpBB. I searched around the forums and nothing here seemed to help. I even tried what axew3 said here, but unfortunately it didn't work.

I'll post the code for overall_footer.html down here and please give me some tips or help to fix the iFrame problem.

Code: Select all

					<!-- IF STYLE_SETTINGS_CONFIG_SIDEBARS -->
                            		</div>
                                </div>
                            </div>

							<!-- IF STYLE_SETTINGS_CONFIG_SIDEBAR_PLACEMENT == 'Left Only' || STYLE_SETTINGS_CONFIG_SIDEBAR_PLACEMENT == 'Both' -->
                            <div id="leftcolumn">
                            	<div class="innertube"><!-- INCLUDE sidebar_left.html --></div>
                            </div>
                            <!-- ENDIF -->

                            <!-- IF STYLE_SETTINGS_CONFIG_SIDEBAR_PLACEMENT == 'Right Only' || STYLE_SETTINGS_CONFIG_SIDEBAR_PLACEMENT == 'Both' -->
                            <div id="rightcolumn">
                                <div class="innertube"><!-- INCLUDE sidebar_right.html --></div>
                            </div>
                            <!-- ENDIF -->
						</div><!-- /#maincontainer -->
                    <!-- ENDIF -->


                    <!-- EVENT overall_footer_content_after -->
                </div>

            <!-- EVENT overall_footer_page_body_after -->

            	</div><!-- /#inner-wrap -->

                <!-- IF STYLE_SETTINGS_HTML_3 and not STYLE_SETTINGS_CONFIG_HIDE_SOCIAL_BAR -->
                	<div class="social_links_footer">{STYLE_SETTINGS_HTML_3}</div>
                <!-- ENDIF -->


            <div id="page-footer" class="page-footer" role="contentinfo">
                <!-- INCLUDE navbar_footer.html -->

                <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
                    <div id="darken" class="darken">&nbsp;</div>
                </div>

                <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
                    <a href="#" class="alert_close">
                        <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
                    </a>
                    <h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
                </div>
                <div id="phpbb_confirm" class="phpbb_alert">
                    <a href="#" class="alert_close">
                        <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
                    </a>
                    <div class="alert_text"></div>
                </div>
            </div>



            <div class="copyright_bar">
                Powered by <a href="http://www.phpBB.com/">phpBB</a>&trade; <span class="planetstyles_credit<!-- IF STYLE_SETTINGS_CONFIG_CREDIT_LINE --> planetstyles_credit_hidden<!-- ENDIF -->">&bull; Design by <a href="http://www.planetstyles.net">PlanetStyles</a></span>
                <!-- EVENT overall_footer_copyright_prepend -->
                <!-- IF TRANSLATION_INFO --><br />{{ TRANSLATION_INFO }}<!-- ENDIF -->
                <!-- EVENT overall_footer_copyright_append -->
                <!-- IF DEBUG_OUTPUT --><br />{{ DEBUG_OUTPUT }}<!-- ENDIF -->
            </div>

            </div> <!-- /#wrap -->

            <div style="display: none;">
                <a id="bottom" class="anchor" accesskey="z"></a>
                <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
            </div>

            <script type="text/javascript" src="{T_JQUERY_LINK}"></script>

            <!-- IF S_ALLOW_CDN -->
                <script type="text/javascript">window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script>
            <!-- ENDIF -->

            <script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>

			<!-- IF STYLE_SETTINGS_CONFIG_PARALLAX_HEADER -->
            	<!-- INCLUDEJS parallax.js -->
            <!-- ENDIF -->
            <!-- INCLUDEJS tooltipster.bundle.min.js -->
            <!-- IF STYLE_SETTINGS_CONFIG_COLLAPSIBLE_PANELS -->
                <!-- INCLUDEJS jquery.collapse.js -->
                <!-- INCLUDEJS jquery.collapse_storage.js -->
            <!-- ENDIF -->
            <!-- INCLUDEJS forum_fn.js -->
            <!-- INCLUDEJS ajax.js -->
            <!-- IF STYLE_SETTINGS_CONFIG_DARK_TOGGLE -->
            	<!-- INCLUDEJS js.cookie.js -->
            <!-- ENDIF -->

            <!-- IF S_ALLOW_CDN -->
                <script type="text/javascript">
                    (function($){
                        var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),
                            $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
                        if ($span.css('fontFamily') !== 'FontAwesome' ) {
                            $fa_cdn.after('<link href="{T_ASSETS_PATH}/css/font-awesome.min.css" rel="stylesheet">');
                            $fa_cdn.remove();
                        }
                        $span.remove();
                    })(jQuery);
                </script>
            <!-- ENDIF -->

            <!-- IF S_COOKIE_NOTICE -->
                <script src="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.js?assets_version={T_ASSETS_VERSION}"></script>
                <script>
				if (typeof window.cookieconsent === "object") {
                    window.addEventListener("load", function(){
                        window.cookieconsent.initialise({
                            "palette": {
                                "popup": {
                                    "background": "#0F538A"
                                },
                                "button": {
                                    "background": "#E5E5E5"
                                }
                            },
                            "theme": "classic",
                            "content": {
                                "message": "{LA_COOKIE_CONSENT_MSG}",
                                "dismiss": "{LA_COOKIE_CONSENT_OK}",
                                "link": "{LA_COOKIE_CONSENT_INFO}",
								"href": "{UA_PRIVACY}"
                            }
                        });
					});
				}
                </script>
            <!-- ENDIF -->

            <!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
            {$SCRIPTS}

            <!-- IF STYLE_SETTINGS_CONFIG_HEADER_PARTICLES -->
                <script type="text/javascript">
					/* Identify the height of headerbar */
					var headerbar_height = $('.headerbar').height();
					/* Match particle container height to headerbar. Creates window for canvas */
					$('.particles_container').css({'height': headerbar_height});

					/* Dynamically apply width to site desc container, maximising clickable area behind it. We only need this to happen when particles are enabled. */
					var logo_width = $('.site-description').width();
					var logo_width_fix = (logo_width+2); /* Caters for retina devices where the width is defined as a decimal. Obvs we can't set a decimal pixel width */
					$('.site-description').css({'width': logo_width_fix});
				</script>
				<script src="{T_TEMPLATE_PATH}/particles.js"></script>
                <script src="{T_TEMPLATE_PATH}/particles.app.js"></script>

                <script type="text/javascript">
					/* Reposition the canvas so it aligns with headerbar */
					$('canvas.particles-js-canvas-el').css({'margin-top': -headerbar_height});
				</script>
            <!-- ENDIF -->

			<script type="text/javascript">
            $(function($) {
                var num_cols = 3,
                container = $('.sub-forumlist'),
                listItem = 'li',
                listClass = 'sub-list';
                container.each(function() {
                    var items_per_col = new Array(),
                    items = $(this).find(listItem),
                    min_items_per_col = Math.floor(items.length / num_cols),
                    difference = items.length - (min_items_per_col * num_cols);
                    for (var i = 0; i < num_cols; i++) {
                        if (i < difference) {
                            items_per_col[i] = min_items_per_col + 1;
                        } else {
                            items_per_col[i] = min_items_per_col;
                        }
                    }
                    for (var i = 0; i < num_cols; i++) {
                        $(this).append($('<ul ></ul>').addClass(listClass));
                        for (var j = 0; j < items_per_col[i]; j++) {
                            var pointer = 0;
                            for (var k = 0; k < i; k++) {
                                pointer += items_per_col[k];
                            }
                            $(this).find('.' + listClass).last().append(items[j + pointer]);
                        }
                    }
                });
            });
            </script>

			<!-- EVENT overall_footer_after -->

      <!-- EVENT overall_footer_body_after -->

			<!-- IF STYLE_SETTINGS_CONFIG_SCROLL_TO_TOP -->
        <a href="#" class="scrollToTop"><span class="fa fa-arrow-up"></span></a>
      <!-- ENDIF -->

<script type="text/javascript">	
document.domain = '8bitf0x.com'; // MANDATORY! // Set/Change this value to fit your domain (example: axew3.com (or leave localhost if on localhost)) 
var wordpress_url_page_forum = 'https://8bitf0x.com/board'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page

var w3all_doc_domain = document.domain;
var w3allappend = false;
var boardU = "{BOARD_URL}";

// Lightbox correct scroll fix:
// https://www.axew3.com/w3/forums/viewtopic.php?f=13&t=885
// remove /* and */ to activate, also more below to complete ...
/*
$(".postimage").on("click", function(event) {
var pos = event.pageY - 100;
 $(parent.window).scrollTop( 200 );
var el = document.getElementById("lightbox");
$("#lightboxOverlay").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lb-close").on("click", function() {
$(parent.window).scrollTop( pos );
});
$(".lightbox").on("click", function() {
$(parent.window).scrollTop( pos );
});
});
*/

function w3allNormalize_phpBBUrl(href){
// try to 'normalize' passed relative links: needed all after last slash /
// exception are kind of passed urls like: /phpbb323/app.php/help/faq
// and if SEO mods that may assign some different kind of links values
// by the way, SEO absolute urls http(s) should be (all?) already considered here ...
var phpbbRUrl = href.split(/^.+?(\w+.+)$/);
if( href.indexOf('app.php') > -1 ){ // since the previous not 'normalize' this type of passed value (and may miss something else)
	 phpbburl = href.split(/^.+?(app\.php.+)$/);
	 w3allappend = phpbburl[1];
 } else if ( /^https?/ig.exec(href) !== null ){ // absolute http(s) passed: try to 'normalize' a possible seo mod
   phpbburl = href.split(boardU);
	 w3allappend = phpbburl[1];
 } else if ( phpbbRUrl[1] && phpbbRUrl[1].length > 1 ){ // 'normalize' any other
   w3allappend = phpbbRUrl[1];
 } else if ( phpbbRUrl[0].length > 1 ){
   w3allappend = phpbbRUrl[0];
   }
// ... if still not normalized
if(/^\W/ig.exec(w3allappend) !== null){
 	w3allappend = w3allappend.split(/^.+?(\w+.+)$/);
 	if(w3allappend[1]){
 		w3allappend = w3allappend[1];
 	}
 	if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){
 		w3allappend = w3allappend[1].substr(1);
 	}
}
return w3allappend;
}
 
$(document).on("click", "a", function(e) {
  var href = $(this).attr("href");

if( /[^-0-9A-Za-z\._#\:\?\/=&%]/ig.exec(href) !== null ){
	return;
}

if( /posting\.php\?mode=[reply|post|bump]/ig.exec(href) !== null || /mcp\.php\?/ig.exec(href) !== null ){
var w3allNOappend = true;
}
// check if link point to external resource
 if ((this.href.indexOf(boardU) > -1) != true){
 if(/^(f|ht)tps?:\/\//i.test(href)){
	e.preventDefault(); // prevent load as we are inside
	parent.location.replace(href);
  return;
 }
}
// check for # short links like on FAQ page
if ( href.charAt(0) == '#' ){
 return;
}

w3allappend = w3allNormalize_phpBBUrl(href);
   var w3all_parent_element_id = $(this).parent().get( 0 ).id; // detect click x ... (ex: return ID smiley-box, onclick post smiles) ... // detect and avoid/allow certain behaviors
   var w3all_onclick_smile  = (w3all_parent_element_id.indexOf('smiley-box') > -1);
   var w3all_onview_topic  = (href.indexOf('viewtopic.php') > -1);
   var w3all_onview_attach  = (href.indexOf('file.php') > -1);
   var w3all_onreview_post = /#[review]+/ig.exec(href);
   var w3all_ck_quickmod  = (href.indexOf('quickmod') > -1);
   var w3all_onreply_topic  = (href.indexOf('mode=reply') > -1);
   var w3all_ck_onindex  = (href.indexOf('index.php') > -1);

// complete Lightbox correct attachment display // activate removing /* and */ 
// or used to open on new tab attachments
/*
if(w3all_onview_attach !== false){
e.preventDefault();
window.open(href,'_blank');
return;
} */

if ( w3all_onclick_smile == false && w3all_onview_attach == false && w3all_onreview_post == null ) {
  if ('parentIFrame' in window) window.parentIFrame.scrollTo(0,50); // change 50 to another value may 0 or 100 or 500. Top distance gap in px when page scroll top
  }
if ('parentIFrame' in window){
  if( typeof w3allNOappend == 'undefined' ){
    window.parentIFrame.sendMessage(w3allappend);
  }
 }
});
 
///////////////////////////////////////////////////////////////////////////
// w3all Ajax UPDATES for phpBB events
 
//if (window.frameElement) { // if in iframe 
//if ('parentIFrame' in window){
if(window.self !== window.top){
var pmn = "{PRIVATE_MESSAGE_COUNT}"; 
var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}"; 
// to send to wp at once here 
var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged; 
if(w3appendevents.indexOf('w3allmchatif') == -1){
//if(parent.location.href.indexOf(wordpress_url_page_forum) > -1){
parent.w3all_ajaxup_from_phpbb(w3appendevents); 
//}
} 
// fix vertical iframe centered on viewtopic.php, preview or where # anchor etc (but skip on iOS)
var w3iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if(w3iOS == false){
$(window).load(function() {
var bd = document.getElementsByTagName("body");
for (var i = 0; i < bd.length; i++) { 
    var bdID = bd[i].getAttribute("id"); 
}
var elt = document.getElementById(bdID);	
elt.setAttribute("style", "position:fixed;top:0%;left:0%;width:100%;margin:0px;");
});
}
 
} // END if (window.frameElement) {
</script>
<script type="text/javascript" src="https://8bitf0x.com/board/iframeResizer.contentWindow.min.js" defer></script>
</body>
</html>

This is an awesome plugin, but this seems to puzzle me a lot. Thanks in advance.
User avatar
axew3
w3all User
w3all User
Posts: 2689
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: iFrame with the Milk Theme will not work.

Post by axew3 »

It's working fine in my test, what you see isn't ok at
https://8bitf0x.com/board ?

apply the smooth scroll maybe:
the v4 code, easier and improved is coming soon
8BitF0x

Re: iFrame with the Milk Theme will not work.

Post by 8BitF0x »

prosliver was currently the default style, I've changed it to the Milk theme and you can see what problem I'm currently having.

Image
User avatar
axew3
w3all User
w3all User
Posts: 2689
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: iFrame with the Milk Theme will not work.

Post by axew3 »

have you try to move all the added code into overall_footer.html
to output just before

Code: Select all

</body>
</html>
tags?

so substantially add the code just before the closing
</body>
tag, can you try?
8BitF0x

Re: iFrame with the Milk Theme will not work.

Post by 8BitF0x »

I think that's where I had it, the overall_footer.html code should be in my post. I checked right now to see if the code was before </body></html> and it currently is still there.
User avatar
axew3
w3all User
w3all User
Posts: 2689
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: iFrame with the Milk Theme will not work.

Post by axew3 »

No it is not at moment.
I see that on firefox mobile it work, but the gap is too large on bottom.

Now, before to understand why you are not able to put the js code right before the closing body tag, that may isn't the problem you should do this:

open the overall_footer.html
just after the js code you added, so after this line:

Code: Select all

<script type="text/javascript" src="https://8bitf0x.com/board/iframeResizer.contentWindow.min.js" defer></script>
add this:

Code: Select all

<div data-iframe-height="100%"></div>
Save, recompile template.

Now open your wordpress page-forums.php template page and
where this line:

Code: Select all

// heightCalculationMethod: 'documentElementOffset', // If iframe not resize correctly, un-comment (or change with one of others available resize methods)

change into:

Code: Select all

heightCalculationMethod: 'taggedElement', // If iframe not resize correctly, un-comment (or change with one of others available resize methods) 
let see what happen with this.

I just see now that iframe resizer lib v4 code is out ... v4 w3all code will be also released soon.
Post Reply