Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Closing a window outside as well

anuraa

Legendary Coder
Hi:
I am opening a window and closing a window with style.width. I like to close the window with clicking on the body outside the window as well when the window is opened. In https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal it does. I am trying to achieve the same task using the last 5 lines of the JavaScript code. My little knowledge of JavaScript doesn't help. If you could help me, it is a great help. Thanks


HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html,
    body {
    margin: 0;
        }
    .sidenav {
        height: 72%;
        width: 0;
        position: fixed;
        top: 0;
        right:0;
        scroll-margin-right: 0;
        background-color: #6a6c6d;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top:50px;
        }
    .sidenav a {
        padding: 8px 8px 10px 15px;
        text-decoration: none;
        font-size: 16px;
        color: black ;
        display: block;
        transition: 0.3s;
        }
    .sidenav a:hover {
        color: #f1f1f1;
        }
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 50px;
        }
    #container{
        display: flex;
        padding: 0px 0px 0px 0px;
        }
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 0px;}
        .sidenav a {font-size: 60px;}  
        }
</style>
</head>
<body>
<div id="mySidenav">
    <div class="sidenav" id="sidenav">
        <a href="javascript:void(0)"  id="closebtn" class="closebtn" onclick="closeNav()"> &times;</a>
           <a href="xx.html">  Mission</a>
        <a href="#">Services</a>
    </div>
</div>
<div  id="BodyTexts">
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">
        &#9776;Menu</span>
    <p>Learning JavaScript</p>
</div>
<script>
    var BArea = document.getElementById("BodyTexts");
    var WArea =  document.getElementById("mySidenav");    
    function openNav() {
        document.getElementById("sidenav").style.width = "30%";
    }
    function closeNav() {
        document.getElementById("sidenav").style.width = "0";
    }
    window.onclick = function(event) {
       if (event.target == BArea  &&  event.target != WArea) {
                closeNav();
    //   document.getElementById("sidenav").style.width = "0";
       }
    }
</script>  
</body>
</html>
 
On my Android I always use Chrome, not that Google app thingy which I don't even quite know what it is. Seems like it might not be a fully functional browser. Or perhaps Apple goofed porting it to their platform. Who cares.
Anyway, seems we are now to the bottom of this and we can close the thread and move on. Glad I could help.
 
(edit - I deleted my previous post but you had already replied to it)

Hi again. I see you implemented my suggestion and I see that it works like you wanted on the computer. At least we're getting somewhere.

However I don't see what your problem is on the smartphone. On my Samsung Android it works exactly the same ! Unfortunately I have no experience with programming on smartphone, so it seems unlikely that I can help you out here.
One thing I notice is that clicking anywhere on the blue title bar (be it on pc or smartphone) opens the side menu. Not sure if that was your intention ? It's not intuitive as there is no hand cursor when you mouse over the title bar (only over the Menu section).
It is me again. I hurriedly answered the question. Now, only that I realized that I wanted to open the overlay window either on text "MENU" or "&#9976" sign. But, it goes beyond that. Thanks for helps.

<div id="menu">
<div id="header"><img src="delphi.jpg" height="30px" width="auto" alt=""/>The
<span class="lsize5">Delphi Graphics Mission</span>
<span class="mtext" style="cursor:pointer" onclick="openNav()">Menu</span>
<span class="dtext" style="cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
</div>
 
Of course it goes beyond that. I said to assign the id menu to the span that contains the icon and the text MENU :

HTML:
<span id="menu" style="font-size:30px;cursor:pointer">&#9776;Menu</span>

but instead you assigned it to the entire blue title bar:

HTML:
<div  id="menu">
<div id="header"><img src="delphi.jpg" height="30px" width="auto" alt=""/>
  <span class="lsize5">Delphi Graphics Mission</span>
  <span class="mtext" style="cursor:pointer" onclick="openNav()">Menu</span> 
  <span class="dtext"  style="cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
</div>

Why ?
 
Of course it goes beyond that. I said to assign the id menu to the span that contains the icon and the text MENU :

HTML:
<span id="menu" style="font-size:30px;cursor:pointer">&#9776;Menu</span>

but instead you assigned it to the entire blue title bar:

HTML:
<div  id="menu">
<div id="header"><img src="delphi.jpg" height="30px" width="auto" alt=""/>
  <span class="lsize5">Delphi Graphics Mission</span>
  <span class="mtext" style="cursor:pointer" onclick="openNav()">Menu</span>
  <span class="dtext"  style="cursor:pointer" onclick="openNav()">&#9776;</span>
</div>
</div>

Why ?
Oops. You are enlightening me like a great professor. Thanks a lot.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom