yaragallamurali Posted February 3, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
yaragallamurali Posted February 3, 2016 Author Share Posted February 3, 2016 Thank you so much. will try this. Link to comment Share on other sites More sharing options...
davej Posted February 3, 2016 Share Posted 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2016 Share Posted 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'; } } Link to comment Share on other sites More sharing options...
davej Posted February 3, 2016 Share Posted February 3, 2016 I had trouble with event bubbling -- or the wrong element being clicked on. edit 5:52pm cdt Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2016 Share Posted February 3, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted February 4, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
davej Posted February 4, 2016 Share Posted February 4, 2016 That's true. As I said above, it depends on the amount of "clutter" on the page. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 4, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now