how to hide the div when clicked on rest of the page?

yaragallamurali · February 3, 2016

Hi

I have an absolute div on my html page. my requirement is when i click on the rest of the page (other than the absolute div) the div's display should become none. I mean the div should not be displayed.

How can i achieve this? any simple solution? Please help.

dsonesuk · February 3, 2016

Check if element exist and is visible on clicking window/document/body hide element, if element exits using outer element using position fixed that fills the entire browser viewport, onclicking of this outer element, hide the inner element.

yaragallamurali · February 3, 2016

Thank you so much. will try this.

davej · February 3, 2016

Seems like it can be a little tricky if there is a lot of clutter...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#outer{
position:relative;
border:1px dotted green;
height:500px;
}
#inner{
position:absolute;
background-color:red;
border:1px dotted red;
top:100px;
left:100px;
right:100px;
bottom:100px;
}
#other1{
border:1px dotted orange;
height:400px;
width:50px;
}
#other2{
border:1px dotted green;
height:100px;
width:200px;
}
</style>
</head>

<body>

<div id="outer">

<div id="inner">
<div id="other2">
</div>
</div>  

<div id="other1">
</div>

</div>

<p>I want to hide the inner div if and only if the user clicks on the outer div.</p>
     
<script>
document.getElementById('outer').onclick = fout;

function fout(e){
  var i = e.target;
  var t = document.getElementById('inner');
  var inner = false;
  if (t.style.display != 'none'){
    while(i.tagName != 'BODY' && inner === false){
      if (i === t){
        inner = true;
      }
      i = i.parentElement;
    }
    if (inner === false){
      alert('hide inner');
      t.style.display = 'none';
    }
  }
}
</script>
     
</body>
</html>

dsonesuk · February 3, 2016

???? why not just

           function fout() {
                var t = document.getElementById('inner');
                if (t.style.display !== 'none') {
                    t.style.display = 'none';
                }
                else
                {
                    t.style.display = 'block';
                }

            }

davej · February 3, 2016

I had trouble with event bubbling -- or the wrong element being clicked on.

edit 5:52pm cdt

dsonesuk · February 3, 2016

You know that 'inner' will be hidden using display: none; check against remaining elements that have parent 'outer' with that to cancel any action taken place.

            document.getElementById('outer').onclick = fout;
            function fout(event) {
                e = event || window.event;
                var t = document.getElementById('inner');

                if (t.style.display !== 'none' && e.target.id === 'outer') {
                    t.style.display = 'none';
                }
                else if (t.style.display === 'none' && e.target.id !== 'outer')
                {
                    return false;
                }
                else
                {
                    t.style.display = 'block';
                }

            }

Edited February 4, 2016 by dsonesuk

davej · February 4, 2016

The only issue with that is if they click outside the inner div but click on some other element other than the outer div itself.

dsonesuk · February 4, 2016

No! if they did that the else if will cancel that out and do nothing, it only works if you click on the exposed areas of the outer div, any other area from other container elements are ignored.

davej · February 4, 2016

That's true. As I said above, it depends on the amount of "clutter" on the page.

dsonesuk · February 4, 2016

I've amended it, it only works if the exposed area of 'outer' div is clicked, any other elements even with child elements clicked themselves will be ignored.

how to hide the div when clicked on rest of the page?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in