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>
 
Not exactly. I tried that answer there. It worked. As soon as something is added to the body, it makes different and difficult. There, my question was not clear.

Here, I am trying to understand the JavaScript and change only the JavaScript so that I can add/ change the body freely. Thanks
 
var bodyarea = document.getElementsByTagName("BODY")[0];

Here, it retrieves the body area. Is it possible to to get the overlay window area say windowarea.

If so, will the following logic work.

Event.target = bodyarea and event.target != windowarea
Then to close the window provided the window is open. I have no clue to check whether the window is opened.

Hope, the person who answered to my previous post will see and help me. Thanks
 
Is it possible to to get the overlay window area say windowarea.
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];

I have no clue to check whether the window is opened.
You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
 
var bodyarea = document.getElementsByTagName("BODY")[0];

Here, it retrieves the body area. Is it possible to to get the overlay window area say windowarea.

If so, will the following logic work.

Event.target = bodyarea and event.target != windowarea
Then to close the window provided the window is open. I have no clue to check whether the window is opened

Hope, the person who answered to my previous post will see and help me. Thanks
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
Thanks so much. Unfortunately, until December 11, I am away from my computer. I am going to change my script as follows.

<script>
Var windowopened = false;
function openNav() {
document.getElementById("sidenav").style.width = "30%";
windowopened = true;
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
windowopened = false:
}
window.onclick = function(event) {
if (event.targetWArea) {
closeNav();
}
}
</script>
if windowarea is a class name, do this: var windowarea = document.getElementsByClassName("windowarea")[0];


You could just set a variable to check if it's opened.
JavaScript:
var windowOpened = false;

function openWindow() {
  //code to open window
  windowOpened = true;
}

function closeWindow() {
  //code to close window
  windowOpened = false;
}

function checkOpenWindow() {
  if (windowOpened) {
    return true;
  } else {
    return false;
  }
}
Thanks so much for that idea. I am still struggling to make that click outside the window overlay only. If I don’t have the the both conditions i.e. Window is opened and also, the click is outside the window, a click anywhere within the window too will also make the window to close.

window.onclick = function(event) {
if Windowopened && click is outside the window.
function closenav

I am getting closer to the solution with your help. Thanks again.
 
I am still struggling to make that click outside the window overlay only. If I don’t have the the both conditions i.e. Window is opened and also, the click is outside the window, a click anywhere within the window too will also make the window to close.
Try this, I think what you're asking is similar to this: https://codeforum.org/threads/how-do-i-do-something-to-the-body-while-a-popup-is-showing.5643
Create an element behind the window, and make it cover the full screen. Then when that element is clicked use JS to close the window.
That way you can also add blur/opacity if you want.
 
Try this, I think what you're asking is similar to this: https://codeforum.org/threads/how-do-i-do-something-to-the-body-while-a-popup-is-showing.5643
Create an element behind the window, and make it cover the full screen. Then when that element is clicked use JS to close the window.
That way you can also add blur/opacity if you want.
Thanks for your input. It is not easy to incorporate that idea with my level of knowledge. Here, in my layout, my
1. opening the window is working
onclick="openNav()">
2. closing the window is working onclick="closeNav”.
3. Now, I am trying to figure out to close the window, if a click is outside “”anywhere”” the window, provided the window is opened. Someone, enlighten me with to have the variable to see whether the window is opened or not.
I would like someone helping me to incorporate the third part purely with JavaScript. Hopefully, full code, as I am a beginner to JavaScript. Thanks
 
Thanks for letting me that idea.

If document.getElementById(“side above”).style.width = 30 && “area of click is outside the sidnav” {
CloseNav}

If I don’t include the condition “area of click is outside the sidnav”, then, the window will close within the overlay window area as well. Now, I am stuck with including the section coo
 
Last sentence ??
Try this in your click event handler :

if ( sidenav.style.width != 0 && event.target != sidenav )

Test on non zero rather than equals 30, as you might want to change the width one day. Your original equality test was wrong BTW, you should have used == instead of =.
 
Last sentence ??
Try this in your click event handler :

if ( sidenav.style.width != 0 && event.target != sidenav )

Test on non zero rather than equals 30, as you might want to change the width one day. Your original equality test was wrong BTW, you should have used == instead of =.
Sorry, I tried only today, as I was away from a computer. I tried the answer as follows. As soon as I take out the comment on following line, my overlay did not open. Thanks for your helps.
if ( sidenav.style.width != 0 && event.target != sidenav ) {
// closeNav();
}

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 sidenav = document.getElementById("sidenav"); 
    
    function openNav() {
        document.getElementById("sidenav").style.width = "30%";
    }
    function closeNav() {
        document.getElementById("sidenav").style.width = "0";
    }
    window.onclick = function(event) {
       if ( sidenav.style.width != 0 && event.target != sidenav )  {
       //    closeNav();
       }
    }
</script> 
</body>
</html>
 
Ah yes, I see it. I should have tested that before recommending 😳
Now I understand why it does not work : it's because you have two click events.
When you click on the Menu element, you execute its onclick function, which opens the sidenav. So far so good. But immediately after this the window.onclick handler is also executed ! That is how events work, they bubble up the hierarchy of elements. By then, the width of the sidenav is no longer zero, so the test fails and we immediately close the sidenav again.

But no worry, we can solve this with an explicit click handler for the menu. In the definition, take out onclick=openNav() and add id=menu so you can refer to it:

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

Then in the javascript create the handler:

JavaScript:
menu.onclick = function(event)
{
    openNav();
    event.stopPropagation();
}

Thanks to the call to event.stopPropagation() the event is no longer bubbled up, and it works like you want (yes, I tested it 😁)
 
Last edited by a moderator:
Ah yes, I see it. I should have tested that before recommending 😳
Now I understand why it does not work : it's because you have two click events.
When you click on the Menu element, you execute its onclick function, which opens the sidenav. So far so good. But immediately after this the window.onclick handler is also executed ! That is how events work, they bubble up the hierarchy of elements. By then, the width of the sidenav is no longer zero, so the test fails and we immediately close the sidenav again.

But no worry, we can solve this with an explicit click handler for the menu. In the definition, take out onclick=openNav() and add id=menu so you can refer to it:

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

Then in the javascript create the handler:

JavaScript:
menu.onclick = function(event)
{
    openNav();
    event.stopPropagation();
}

Thanks to the call to event.stopPropagation() the event is no longer bubbled up, and it works like you want (yes, I tested it 😁)
It is me again. Learnt a lot with your all the inputs. I created www.delphi.anura7.ca which is a purely a volunteer help. In the computer, the closing of window works well. But, on my smartphone, the window closing doesn't work. However, if you open the link people and then, click on the graphical image after opening the overlay window, the overlay window closes. But, in the same link, clicking on the text doesn't close the window. Confused a lot. Thanks for your helps. Regards Anura
 
So, if I understand correctly, it now works (with my latest suggestion) like you want on the computer ?
Unfortunately I have zero experience with web programming on a smartphone, so I'm afraid I can't help you along here.
Yes, it works great on the computer with your suggestion the way I want. Thanks a lot. Unless, your valuable guidance, I wouldn't have accomplished that task. Thanks again. Anura
 
(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).
 
(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).
Thanks so much. "Opening the window on the bar", I intended. I have a Apple. After your reply, I tried on Chrome, it works well as intended. But, when I tried on just Google app on Iphone, it doesn't work. So, it is an issue with Apple Google, I guess. Thanks a lot. Regards Anura
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom