I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>
As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>
Related
I used the following code to toggle a button class in order to make a full-screen mobile menu.
HTML
button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});
Now I would like to hide another item in my header when the toggled class .is-active is present.
The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.
jQuery(function($) {
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
}
});
Appreciate any help :) !
you have to show the element again after the burger menu closes:
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
// hide / show other element
if ($('.hamburger--slider.is-active').length) {
$('.rey-headerCart-wrapper').hide();
} else {
$('.rey-headerCart-wrapper').show();
}
});
});
});
Or in vanilla javascript:
window.addEventListener("load", () => {
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".hamburger--slider").classList.toggle("is-active");
// hide / show other element
const cart = document.querySelector(".rey-headerCart-wrapper");
if (document.querySelector(".hamburger--slider.is-active")) {
cart.style.display = "none";
} else {
cart.style.display = "block";
// apply original display style
// cart.style.display = "inline-block";
// cart.style.display = "flex";
};
});
})
In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.
In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).
This can get quite messy really fast.
A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.
That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.
$('.nav-toggler').on('click', function() {
$('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
padding: 1em;
margin: 2px;
}
.cart {
background: #FFF000;
}
.menu{
background: #F1F1F1;
display: none;
}
#nav-wrapper.active > .menu {
display: block;
}
#nav-wrapper.active > .cart {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
<button class="nav-toggler">Toggle</button>
<div class="menu">My Menu</div>
<div class="cart">My Cart</div>
</div>
I have a subscription form that drops down on top of the navigation when the user clicks a button (#sub-header). this button is below the navigation. my navigation is fixed, so this button has a top of 60px, to keep it below the nav. however when the button is clicked and the subscription form drops down, then there is a space of 60px between the button and the navigation. i need to change the top of the button from 60px to 0px only when the subscription form is open. This is my code:
if ($('.subscription-signup').css('display') == 'none') {
$('#sub-header').css("top", "60px");
} else if ($('.subscription-signup').css('display') == 'block') {
$('#sub-header').css("top", "0px");
};
Here is my html code:
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"> </div>
<div class="email-signup">
<form></form>
</div>
</div>
And here is the code to open the form (which works):
var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
For some reason, when the subscription form is open and is set to display: block, the top does not change to 0px. Is there something wrong with my code? Can anyone figure out how to do this?
use
$('.subscription-signup').is(':hidden')
instead
Why not just add a class to the element?
$subscribe.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').addClass('subOpen');
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').removeClass('subOpen');
$subscribeContent.slideToggle();
});
.subscription-signup {
top: 0px;
}
.subOpen {
top: 60px;
}
<body>
<div>
</div>
</body>
<script>
window.onclick = function() {do something;}
</script>
How do I prevent clicks inside of the div from carrying out the body's onclick function?
Try substituting <script> element for <style> element , utilizing e.target.tagName to determine if clicked element is DIV , return false if clicked element is DIV , else log clicked element to console
div {
width: 100px;
height: 100px;
border: 2px dotted tomato;
}
<body>
<div>
click
</div>
</body>
<script>
window.onclick = function(e) {
if (e.target.tagName === "DIV") return false
// do something;
else console.log(this)
}
</script>
If you only need to support modern browsers (>=IE11), use pointer-events:
div { pointer-events: none; }
Note that this will also inhibit all kinds of mouse-related effects, including hover.
I'm playing around with building a basic modal window and i want it do dissapear when i click the edges. So my problem in it's most basic form:
<div style="width:100%;height:100%;" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
What is the best way to achieve this? To use unnested divs? html/css magic?
HTML:
<div style="width:100%;height:100%;" class="outerModal">
Hide all onclick.
<div style="width:100px;height:100px;">
does not hide all onclick
</div>
</div>
JavaScript:
$(document).on("click", ".outerModal", function(evt) { //listen for clicks
var target = $(evt.target ||evt.srcElement); //get the element that was clicked on
if (target.is(".outerModal")) { //make sure it was not a child that was clicked.
//hide dialog
}
});
Example:
JSFiddle
When you hide the parent tag, it automatically hides the childen tag as well, You should first contain the child div into variable and after that hide the parent div and append that stored child div into parent tag something like this.
HTML
<div id="result">
<div style="width:100%;height:100%;" id="parentDiv" onclick="hideAll()">
Hide all onclick.
<div style="width:100px;height:100px;" id="childDiv">
does not hide all onclick
</div>
</div>
</div>
javaScript
function hideAll(){
var childDiv = document.getElementById('childDiv'); //contain child div
var parDiv = document.getElementById('parentDiv');
parDiv.style.display = 'none'; //hide parent div
parDiv.parentNode.appendChild(childDiv); //append child div
}
DEMO
Assuming that "parentDiv" is to be the background and "childDiv" is to be the actual modal content, the best way I have found is to separate the divs entirely.
HTML
<div id="parentDiv" onclick="hideAll()"> </div>
<div id="childDiv" >
does not hide all onclick
</div>
Javascript using jQuery
function hideAll(){
/* The Parent Div will hide everything when clicked, but the child won't */
$('#childDiv').fadeOut(1000, function(){
$('#parentDiv').fadeOut(1000);
});
}
CSS
#parentDiv {
background: black;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
}
#childDiv {
display: block;
position: relative;
background: white;
height: 200px;
width: 200px;
z-index: 101
}
Here is a working example.
Hope this helps at all.
See this fiddle:
http://jsfiddle.net/eZp9D/
$(document).ready(function () {
$('#parentDiv').click(function (e) {
if ($(e.target).prop('id') == "parentDiv") {
$(this).hide();
}
});
});
You can use basic jQuery and style it accordingly with CSS.
Check this example.
If you want to have it disappear by clicking outside of the dialog window, make sure that onClick you perform this action:
$( "#dialog_id" ).dialog( "close" );
I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance
This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html