Onclick outside of div, hide the div

Akidus Published at Dev

Akidus

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.

Krupesh Kotecha

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.