Akidus Akidus - 6 months ago 27
Javascript Question

Onclick outside of div, hide the div

I want to hide the div

#startMnu
when the user clicks out of the div named
.startBtn
. I can't get this to work, using this tutorial https://jsfiddle.net/KyleMit/tHCUB/ , for wherever I click, it says that it's outside the box.

$(".startBtn").click(function() {
$(".startBtn").fadeToggle(200);
$("#startMnu").toggle(200);
});

$("body").clickOff(function() {
alert('clickOff');
});


These last lines of code are the only that have changed from the javascript part in the jsfiddle.

I'm trying to make a menu, where you can click the menu button, to open it, and close it either by clicking the button again, or clicking out of the div. Right now, the alert pops up wherever I click. Ideas?

Edit:



//Effects.js
$(function() {
$(".startBtn").click(function() {
$(".startBtn").fadeToggle(200);
$("#startMnu").toggle(200);
});
});
$.fn.clickOff = function(callback, selfDestroy) {
var clicked = false;
var parent = this;
var destroy = selfDestroy || true;

parent.click(function() {
clicked = true;
});

$(document).click(function(event) {
if (!clicked) {
callback(parent, event);
}
if (destroy) {
//parent.clickOff = function() {};
//parent.off("click");
//$(document).off("click");
//parent.off("clickOff");
};
clicked = false;
});
};

$(".startBtn").click(function(event) {
event.stopPropagation();
$("#startMnu").toggle();
});

$("body").click(function() {
$("#startMnu").hide();
});


/* effects.css */

#startBtn {
position: absolute;
transition: all ease 200ms;
}
#startBtn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#startBtnHvr {
display: none;
position: absolute;
transition: all ease 0ms;
}
.startBtn {
width: 64px;
height: 64px;
}
/* style.css */

body {
background-image: url("background.png") no-repeat center center fixed;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Tahoma, Geneva, sans-serif;
color: #333;
}
#startMnu {
display: none;
padding: 280px 180px;
background: linear-gradient(to bottom right, rgba(86, 11, 3, .8), rgba(4, 74, 100, .8));
/* Standard syntax */
float: left;
position: absolute;
border-radius: 1px;
border: 2px solid #333;
margin-left: -8px;
margin-top: 100px;
}


<!DOCTYPE HTML>
<html>

<head>
<title>Online OS</title>
<link rel="icon" type="image/png" href="ico_default.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="effects.js"></script>
<link href="effects.css" rel="stylesheet" type="text/css" id="sheet1">
<link href="style.css" rel="stylesheet" type="text/css" id="sheet1">
</head>

<body>
<img id="startBtn" class="startBtn" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/2000px-Circle_-_black_simple.svg.png" alt="" />
<img id="startBtnHvr" class="startBtn" src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/C/R/CR210.jpg" alt="" />
<div id="startMnu">
<h2 style=" float:left; position:absolute; margin-left:-95px; margin-top:-270px;" class="rename">Popup<h2>
</div>
</body>
</html>




This is what I mean, slight errors though in snippet.

Answer

Try this

$(".startBtn").click(function(event) {
  event.stopPropagation();
  $("#startMenu").slideToggle("slow");
});

$("#startMenu").click(function(event) {
  event.stopPropagation();
});

$("body").click(function() {
  $("#startMenu").slideUp("slow");
});
#startMenu {
  background: red;
  height: 100px;
  width: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="startBtn">Menu</button>
<br><br>
<div id="startMenu">startMnu</div>

Comments