0

I'm using script editor WP to create a Full screen overlay navigation feature.

I got the code from https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp.

I modified it some because I want to have multiple items to click in order to activate the feature. See pic below:

enter image description here

It works fine, except, no matter which one I click on, they both show the links associated with TTP. I want to click on Doctrine and see the Doctrine links, and click on TTP to see the TTP links.

I know this subject has been beat to death, but I cannot find anything that satisfies my requirement. Below is how I am referencing getElementById.

Note: I replaced my actual links with dummy links.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(28,65,104, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #eccb13;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #800000;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
</head>
<body>

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Car</a>
    <a href="#">Bicycle</a>
    <a href="#">Boat</a>
    <a href="#">Airplane</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; Doctrine</span>

<p></p>

<div id="ttpNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Apple</a>
    <a href="#">Orange</a>
    <a href="#">Dog</a>
    <a href="#">Cat</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; TTP</span>

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openNav() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

</body>
</html>

If I change the script around like below, then no matter which one I click on, they both overlay on top of each other. In other words, I can see the TTP links, but also see the Doctrine links behind it.

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
   document.getElementById("ttpNav").style.height = "0%";
}

</script>
0

I received a solution here: https://stackoverflow.com/questions/51901445/reference-multiple-different-div-ids-using-document-getelementbyid

Below is the new code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(28,65,104, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #eccb13;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #800000;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
</head>
<body>

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeDoctrine()">&times;</a>
  <div class="overlay-content">
    <a href="#">Car</a>
    <a href="#">Bicycle</a>
    <a href="#">Boat</a>
    <a href="#">Airplane</a>
  </div>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openDoctrine()">&#9758; Doctrine</span>

<p></p>

<div id="ttpNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeTTP()">&times;</a>
  <div class="overlay-content">
    <a href="#">Apple</a>
    <a href="#">Orange</a>
    <a href="#">Dog</a>
    <a href="#">Cat</a> 
  </div>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openTTP()">&#9758; TTP</span>

<script>
function openDoctrine() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeDoctrine() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openTTP() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeTTP() {
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.