I've got a parent page and a child page issue involving JavaScript functions back and forth. The basic idea (this is for a menu system on a mobile site for thousands of pages of content) is that there is a NAV on the parent page which is hidden using CSS (z-index) which has an iFrame in it. On the body of the parent page is a button which performs two JavaScript functions: it swaps the z-index to display the NAV over the body and it loads the child page into the iFrame in the NAV. This is all working well.
My issue is that I have another button in the NAV and the function that performs is to re-hide the NAV (send the z-index back to its hidden location). I want to get rid of this button and have the iFrame take up the entire NAV, and then I want to have a button on the child page which calls the same function to reset the z-index.
Basically, you see a blank page with a button, you hit the button and a NAV window appears with content loaded in an iFrame. And in this iFrame is a button to make the NAV disappear and again just show a black page with the first button.
I scoured over the site and googled this several times but I'm a JavaScript novice and I can't quite figure out how to make the button on the child page call the JavaScript function on the parent page. I followed some of the suggestions made on this post: link, but all I get now is that the button on the child page make the parent disappear and loads the child page in the browser (not what I was going for).
Here's the CSS & HTML/JAVASCRIPT on the Parent Page:
/*Basic Style*/
body {
margin: 0;
color: #FFFFFF;
font-family: tahoma;
text-wrap: suppress;
}
/*End: Basic Style*/
/*Pop Out Menu Styles*/
.PopOutMenu {
position: fixed;
width: 100%;
height: 100%;
left: 0;
z-index: 1000;
overflow: hidden;
background-color: #FFFFFF;
}
.PopOutMenu-Top {
top: -2000px;
}
.PopOutMenu-Top.PopOutMenu-Open {
top: 0px;
}
.PopOutMenu,
.PopOutMenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*End Menus*/
/*Header*/
#header {
width: 100%;
height: 7%;
background-color: blue;
display: table;
position: fixed;
padding-top: 1%;
padding-bottom: 1%;
text-align: center;
}
#showChild {
font-family: tahoma;
font-size: 4vw;
line-height: 1.6875;
border: none;
color: white;
text-decoration: none;
background-color: inherit;
background-color: #0F9600;
width: 30vw;
}
#showChild:active {
background-color: darkgreen;
}
#MenuContainer {
position: relative;
padding-bottom: 100%;
padding-top: 100%;
height: 0;
overflow: hidden;
}
#MenuContainer iframe {
position: absolute;
top:0;
left: 0;
width: 101%;
height: 100%;
border: 0;
}
/*End Header*/
.BackButton {
background-color: red;
text-align: center;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ButtonSwap-4</title>
<script>
function loadFrame (elm){
var frame1 = document.getElementById('menuframe');
frame1.src = elm.dataset.src;
}
</script>
<link href="parent-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="PopOutMenu PopOutMenu-Horizontal PopOutMenu-Top" id="PopOutMenu-1">
<div class="BackButton"> <button id="closeNAV">
X
</button>
</div>
<div id="MenuContainer">
<iframe id="menuframe"></iframe>
</div>
</nav>
<div id="header">
<button id="showChild" data-src="child.html"> Open NAV</button>
</div>
<script src="../../../../js/classie.js"></script>
<script>
closeNAV.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'PopOutMenu-Open' );
disableOther( 'closeNAV' );
};
function disableOther( button ) {
if( button !== 'closeNAV' ) {
classie.toggle( closeNAV, 'disabled' );
}
}
var menuTop = document.getElementById( 'PopOutMenu-1' ),
showChild = document.getElementById( 'showChild' ),
body = document.body;
showChild.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'PopOutMenu-Open' );
disableOther( 'showChild' );
loadFrame(this);
};
function disableOther( button ) {
if( button !== 'showChild' ) {
classie.toggle( showChild, 'disabled' );
}
}
</script>
</body>
</html>And here's the CSS & HTML/JAVASCRIPT for the child:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#ChildContainer {
display: table;
background-color: green;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div id="ChildContainer">
<a href="#" id="closeNAV" onclick="window.top.disableOther( button ) {
if( button !== 'closeNAV' ) {
classie.toggle( closeNAV, 'disabled' );">Close NAV</a>
</div>
</body>
</html>Any help would be hot. Thank you!
Note: the javascript for this was created using Codrops blueprint for Slide & Push Menus.
