Need help hiding div on forums while embeded w3all url active using script

[kaspir]

EDIT: after hours of trying, I had my script working on the WP side : https://thetopfew.com/community/
I'm using this to hide two elements for WP, BUT doesn't work for the embed forum:

Code: Select all

	
<script type = "text/javascript">
	(function(){
		var url = window.location.href; 
		if (/(community)/i.test(url)) {
			document.getElementsByClassName("hideEmbedWP")[0].style.display = 'none'; //hides WP footer
			document.getElementsByClassName("woocommerce-breadcrumb")[0].style.display = 'none';
		}
	})();
</script>

I tried the script all over, footer, header, and both overall_header, overall_footer.. not sure :headscratch: Perhaps is has everything to do with the resizer.js? Or this url match isn't gonna work.. need another idea for the embed forum.

The only two elements I want hidden on forums if you were to inspect that link above, is the: .top-bar & #headerbar
(then I have to figure out why the floating top nav-bar isn't working on embed template.. hopefully last thing and it will look very good)

[axew3]

Hi Greg, if i have understand, you want to toggle the iframe, so you can do this:
on page forum, where:

Code: Select all

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

change into:

Code: Select all

<div onclick="my_FToggle()">toggle me please!</div>
<!-- START iframe div -->
<div id="myFToggle" class="fnodisplay">

so you need to add the related code to toggle the wrapping iframe div, into an hook that need to add this code into the WP footer, you want for the iframed wp forum page, so may add this into the php code on top of the page-(forum or whatever named).php:

Code: Select all

<?php
function footoggle() {
    echo '<script>function my_FToggle() {
 var myFToggle = document.getElementById("myFToggle");
 myFToggle.classList.toggle('fnodisplay');
 myFToggle.classList.toggle('fdisplay');
}</script>';
}
add_action( 'wp_footer', 'footoggle' );
?>

to add related css:
on page-forum.php where code:

Code: Select all

$s = "<script type=\"text/javascript\" src=\"".plugins_url()."/wp-w3all-phpbb-integration/addons/resizer/iframeResizer.min.js\"></script>

change into:

Code: Select all

$s = "<style type="text/css">
.fnodisplay{
display:none;
}
.fdisplay{
display:block;
}</style>
<script type=\"text/javascript\" src=\"".plugins_url()."/wp-w3all-phpbb-integration/addons/resizer/iframeResizer.min.js\"></script>

hope this will help (and to write all the necessary on fly)

[kaspir]

Well that looks cool toggle button, i just tried it and it works perfectly! But sadly, no that's not what I need. I need to hide divs in a forum template.

If you check out the link I left in last post, I want to hide the whole section where the moon and search forums box is.

Sorry if I was confusing, my scripts are working to hide elements on wordpress, but same script won't work to hide on forum.. so I guess I need something special for iframe.

Furthermore, I've discovered another problem with the iframe, when viewing it, it also has stopped a phpbb extension script stop working, loaded thru the overall_footer_after event that does this, it's for a floating navigation bar (damn it you really should visit my site more!):

Code: Select all

<script type="text/javascript">
jQuery("document").ready(function($){
	
	var nav = $('#nav-main');
	
	$(window).on('scroll', function() {
		if ($(this).scrollTop() > 180) {
			nav.addClass('fixedtopbar');
		} else {
			nav.removeClass('fixedtopbar');
		}
	});

});
</script>

As you can see, it's another element edit, that does not work on iframe. Sorry.. lol I'm always finding the complicated tasks.

edit: also there are these errors: http://prntscr.com/ilq0ci

Took a snapshot of what I want it to look like, that is after I can get the two elements to hide on iframe: http://prntscr.com/ilq2xz

[axew3]

Ah! Ok! so is necessary to add the code into the phpBB template overall_footer.html and overall_header.html, not on page-forum.php in WP ...
into your overall_header.html phpBB template, on top

Code: Select all

<div class="inner">

change into

Code: Select all

<div class="inner" id="theIDtoAdd" onclick="my_FToggle()">

that is related only to the div that contain the full moon on top.
the code to add, should be +- like this:

Code: Select all

function footoggle() {
    echo '<script>function my_FToggle() {
 var myFToggle = document.getElementById("theIDtoAdd");
 myFToggle.classList.toggle('inner');
 myFToggle.classList.toggle('noinner');
}</script>';
}

on phpBB template css add the css property display:block; to the inner class selector
and duplicate it, naming the duplicate noinner, and adding display:none; instead then display:block;;
should work!?

About the error on console and CORS;
on page-forum(or whatever).php

Code: Select all

/* document.domain = 'mydomain.com'; // NOTE: Un-comment and reset/setup this with YOUR domain if js error when WP is like/on wp.domain.com and phpBB on domain.com: js origin error come out when WP is on subdomain install and phpBB on domain. The origin fix is needed in case: (do this also on phpBB overall_footer.html added code)*/

??

[kaspir]

Thanks for your response mate.

I'm afraid that's not going to work. I don't want a clickable toggle switch, I want it hidden completely while viewing iframe only.



I've tried a similar script (like many) like this one you just gave me, instead using addClass and removeClass, also I tried onload="funct()" in the html as well, still no effect no matter how many combinations I run. It seems very odd, because I have no trouble running this on WP:

Code: Select all

	<script type = "text/javascript">
	(function(){
		var url = window.location.href; 
		if (/(community)/i.test(url)) {
			document.getElementsByClassName("hideEmbedWP")[0].style.display = 'none';
			document.getElementsByClassName("woocommerce-breadcrumb")[0].style.display = 'none';
		}
	})();
	</script>

and it works just fine as you can see from my community iframe page, the woo breadcrumb and WP footer is gone.

EDIT: thx for the JS error console fix, that worked.

[kaspir]

I give up using the iframe. It not only broke my floating header script, it doesn't recognize this very correct script I'm trying to add... so nerve racking.. I got other stuff to do.