Overlay with auto display on page load

Question

I have been trying for days to get this to work, I am looking to have this overlay as is but simply initiate on page load instead of having to click the link in order to have it open. Can anyone suggest what i can do to have it auto overlay when someone visits?

   <!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        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(0,0,0, 0.6);
        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: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    .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>
    <body>
    
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
    
    <h2></h2>
    
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    
    <script>
    function openNav() {
        document.getElementById("myNav").style.height = "100%";
    }
    
    function closeNav() {
        document.getElementById("myNav").style.height = "0%";
    }
    </script>
         
    </body>
    </html>

Just add `document.addEventListener('DOMContentLoaded', openNav());` inside your ` — Mihailo, Sep 22 '16 at 16:49
@Mihailo please write that as an answer so it can be accepted — Soviut, Sep 22 '16 at 23:29

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

Just add document.addEventListener('DOMContentLoaded', openNav()); inside your <script>

Shorthand : document.ready(openNav());

For more information check out: js document.ready()

edited May 23 '17 at 10:27

Community

1
1

answered Sep 23 '16 at 10:38

Mihailo

4,736
4
22
30

score 0 · Answer 2 · answered Sep 23 '16 at 10:45

add openNav()

openNav()

<!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        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(0,0,0, 0.6);
        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: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    .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>
    <body>
    
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
    
    <h2></h2>
    
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    
    <script>
    function openNav() {
        document.getElementById("myNav").style.height = "100%";
    }
    
    function closeNav() {
        document.getElementById("myNav").style.height = "0%";
    }
    </script>
         
    </body>
    </html>

Overlay with auto display on page load

2 Answers2