Troubles when closing div by clicking outside it

Question

I am working on creating a website and I am stuck on a certain function I am trying to build. I am trying to slide back a div to its original place if anyplace outside the div is clicked. I've looked everywhere on stack but to no avail. What happens to me is that the background clicks remain active at all times, I only need it to be active when the div has slid to become sort of a popup.

Here is my jsfiddle: https://jsfiddle.net/DTcHh/10567/

Here is the jquery for one of the divs (the rest are similar)

var text = 1;

$('.login1').click(function(e){
    e.preventDefault();

    $('.loginform_hidden').toggleClass('loginform_visible');
    $(".animateSlide").toggle(300, function(){
        $(this).focus();
    });

    if(text == 1){
        $(".div1").toggleClass("animateSlide col-xs-12");
        $('.login1').html('Go Back');
        $('.imageOne').toggleClass('animateSlideTop');
        // If an event gets to the body
        $('.div2, .div3, .patientAccess').toggle("fast");

document.addEventListener('mouseup', function(event){
    var box = document.getElementsByClassName('animateSlide');
    if (event.target != box && event.target.parentNode != box){
         $('.div2, .div3, .patientAccess').toggle("fast");
         $(".div1").toggleClass("animateSlide ");
      text=0;
    }
            });

        text = 0;
    } else {
        $(".div1").toggleClass("animateSlide");
        $('.login1').html('Start Animation');
        $('.imageOne').toggleClass('animateSlideTop');

        $('.div2, .div3, .patientAccess').toggle("fast");

        text = 1;
    }
});

$(".div1").on('blur', function() {
    $(this).fadeOut(300);
});

EDIT: The jsfiddle now incorporates what I have been trying to utilize.

Name your event handler, and turn it off at the right point. https://api.jquery.com/off/ — connexo, Jul 29 '15 at 19:02
possible duplicate of [jQuery click anywhere in the page except on 1 div](http://stackoverflow.com/questions/12661797/jquery-click-anywhere-in-the-page-except-on-1-div) — showdev, Jul 29 '15 at 19:03
possible duplicate of [Removing event handler with .off](http://stackoverflow.com/questions/16088400/removing-event-handler-with-off) — connexo, Jul 29 '15 at 19:04
@showdev I looked at that, i cant seem to get it working for my script — harman litt, Jul 29 '15 at 19:05
@harmanlitt What specifically went wrong with the method in that answer? Can we see your attempt? — showdev, Jul 29 '15 at 19:13
@showdev The page would not go back to its original state. By this i mean that the other div containers would not re- appear — harman litt, Jul 29 '15 at 19:16
It will help to show your attempt so that we can try to reproduce the same problem you're having. — showdev, Jul 29 '15 at 19:17

score 0 · Answer 1 · answered Jul 29 '15 at 19:10

0

You can namespace an event handler using this syntax:

$("#myElement").on("click.myEventHandlerName", function() { ... });

At any point, you can remove the event handler again by calling

$("#myElement").off("click.myEventHandlerName", "#myElement");

answered Jul 29 '15 at 19:10

connexo

53,704
14
91
128

sorry, I am not an expert in jquery, how does one create an eventhandler, and how could I incorporate it in my code? – harman litt Jul 29 '15 at 19:12
Instead of `$('.login1').click(function(e){` you go `$('.login1').on("click.myClickHandler", function(e) ...`. – connexo Jul 29 '15 at 19:17
You're already using `on()` in your code, just for the `blur` event: `$(".div1").on('blur', function() ` – connexo Jul 29 '15 at 19:19
If you're only willing to accept an answer that "corrects" your code (a.k.a. does the work for you) I'm afraid I won't be the one. It also wouldn't be any good for you, as you would not learn anything. Take it as being pointed in the right direction. – connexo Jul 29 '15 at 19:21
I apologize for the misunderstanding. I am not looking for someone to do my work for me, I am simply stuck on a bug that I cannot seem to fix. For which I am looking for help. – harman litt Jul 29 '15 at 19:26
... and help you got! – connexo Jul 29 '15 at 19:32

score 0 · Accepted Answer · edited May 23 '17 at 12:13

As a demonstration, I built a simplified version of what I think you're aiming to achieve.

I'm using the "event.target" method described in this answer.

Since you are using CSS transitions, I'm using jQuery to detect the end of those transitions using a method found here.

I've given all boxes a class of "animbox" so that they can all be referenced as a group. I've also given each box its own ID so it can be styled individually with CSS.

I've commented the code in an attempt to explain what's going on.

// define all box elements
var $allBoxes = jQuery('.animbox');


// FUNCTION TO SHOW A SELECTED BOX

function showBox($thisBox) {
  $allBoxes.hide();                          // hide all boxes  
  $thisBox.show().addClass('animateSlide');  // show and animate selected box  
  $('div.login', $thisBox).text("Go Back");  // change the selected box's link text
}


// FUNCTION TO RETURN BOXES TO THE DEFAULT STATE

function restoreDefaultState() {      
  
  var $thisBox = jQuery('div.animbox.animateSlide');     // identify an open box
  
  if ($thisBox.length) {                                 // if a box is open...
    $thisBox.removeClass('animateSlide');                // close this box
    $thisBox.one('webkitTransitionEnd'+
                 ' otransitionend'+
                 ' oTransitionEnd'+
                 ' msTransitionEnd'+
                 ' transitionend', function(e) {         // when the box is closed...
      $allBoxes.show();                                  // show all boxes
      $('div.login', $thisBox).text("Start Animation");  // change the link text
    });
  }

}


// CLICK HANDLER FOR ALL "login" TRIGGERS

$('div.login').click(function(e) {

  var $thisBox = $(this).closest('div.animbox');  // identify clicked box

  if (!$thisBox.hasClass('animateSlide')) {       // if the box is not open...
    showBox($thisBox);                            // open it
  } else {                                        // otherwise...
    restoreDefaultState();                        // restore the default state
  }

});


// CLICK HANDLER TO RESTORE DEFAULT STATE WHEN CLICK HAPPENS OUTSIDE A BOX

$('body').click(function(evt) {

  if ($(evt.target).hasClass('animbox') ||                 // if a box is clicked...
      $(evt.target).closest('div.animbox').length > 0) {   // or a child of a box...
        return;                                            // cancel
      }

  restoreDefaultState();                                   // restore the default state

});

div.container-fluid {
  background-color: #464646;
}
.v-center {
  display: table;
  height: 100vh;
}
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.patientAccess {
  transition: all .5s;
  background: white;
  height: 200px;
  width: 90%;
  position: absolute;
  opacity: 0.7;
  margin-top: -100px;
}
.patientAccess p {
  font-size: 1.5em;
  font-weight: bold;
}
div.animbox {
  transition: all .5s;
  position: absolute;
  cursor: pointer;
  width: 90%;
  height: 100px;
  opacity: 0.7;
}
div#animbox1 {
  background: #e76700;
}
div#animbox2 {
  background: #74b8fe;
}
div#animbox3 {
  background: #848484;
}
div.login {
  color: white;
  font-size: 1em;
  cursor: pointer;
}
div#animbox1.animateSlide {
  width: 200px;
  height: 300px;
  margin-left: 100px;
  opacity: 1;
}
div#animbox2.animateSlide {
  width: 250px;
  height: 450px;
  margin-left: -25px;
  margin-top: -150px;
}
div#animbox3.animateSlide {
  width: 150px;
  height: 150px;
  opacity: .5;
  margin-left: -100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-12 v-center">
      <div class="content text-center">
        <div class="col-xs-2 animated slideInRight  "></div>
        <div class="col-xs-2 animated slideInRight  ">
          <div class="patientAccess">
            <p>Patient Resource Access</p>
          </div>
        </div>
        <div class="col-xs-2 animated slideInRight">
          <div class="animbox" id="animbox1">
            <div class="login">Start Animation</div>
            <div class="loginform_hidden "></div>
          </div>
        </div>
        <div class="col-xs-2 animated slideInRight">
          <div class="animbox" id="animbox2">
            <div class="login">Start Animation</div>
            <div class="registrationform_hidden"></div>
          </div>
        </div>
        <div class="col-xs-2 animated slideInRight">
          <div class="animbox" id="animbox3">
            <div class="login">Start Animation</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

wow, you went above and beyond. Thank you very much. I was stuck on this part for the past 24 hours. — harman litt, Jul 29 '15 at 20:49

Troubles when closing div by clicking outside it

2 Answers2