CODEWITHSUNDEEP
javascriptjqueryhtmlcss
PiotrS
PiotrS

Reputation: 157

Detect click inside/outside div

.container
{
  width:500px;
  height:500px;
  background-color:grey;
  }
.box
{
  width:150px;
  height:30px;
  background-color:white;
  position:relative;
  top:130px;
  left:10px;
  color:black;
  }
.window
{
  height:300px;
  width:250px;
  background-color:red;
  position:absolute;
  left:200px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>

Hello,

I have one question, is possible to detect focus and blur into div (class="box"). I would like to click in div class="box" (when div is active) and the red box (class="window") fadeOut and then when click outside "box" "window" fadeIn ?

Thank you for your time :)

Upvotes: 0

Views: 456

Answers (3)

Asons
Asons

Reputation: 87191

This can be done w/o using script, here in combination with the :focus pseudo class and the immediate sibling selector +

Note, for an element other than form elements to get focus, it need the tab-index set.

Stack snippet

.container {
  width: 500px;
  height: 500px;
  background-color: grey;
}
.box {
  width: 150px;
  height: 30px;
  background-color: white;
  position: relative;
  top: 130px;
  left: 10px;
  color: black;
}
.window {
  height: 300px;
  width: 250px;
  background-color: red;
  position: absolute;
  left: 200px;
  transition: opacity 1s;
}

.box:focus + .window {
  opacity: 0;
  transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div tab-index="1" class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>

Upvotes: 0

frnt
frnt

Reputation: 8795

You could do that using jQuery focus and blur event handler, .box on focus it hides .window and on blur it shows .window.

$(document).ready(function(){
	$('.box').on('focus',function(){
  	$('.window').hide(200);
  });
  $('.box').on('blur',function(){
  	$('.window').show(200);
  });
});
.container
{
  width:500px;
  height:500px;
  background-color:grey;
  }
.box
{
  width:150px;
  height:30px;
  background-color:white;
  position:relative;
  top:130px;
  left:10px;
  color:black;
  }
.window
{
  height:300px;
  width:250px;
  background-color:red;
  position:absolute;
  left:200px;
  }
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>

Upvotes: 1

JVDL
JVDL

Reputation: 1202

You can detect focus/blur events on the .box and in those event handlers you can take the appropriate actions. 

var boxEl = document.querySelector('.box');

boxEl.addEventListener('focus', function(e) {
  console.log('focused');
});

boxEl.addEventListener('blur', function(e) {
  console.log('blurred');
});
.container {
  width: 500px;
  height: 500px;
  background-color: grey;
}
.box {
  width: 150px;
  height: 30px;
  background-color: white;
  position: relative;
  top: 130px;
  left: 10px;
  color: black;
}
.window {
  height: 300px;
  width: 250px;
  background-color: red;
  position: absolute;
  left: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box" contenteditable="true">
  </div>
  <div class="window">
  </div>
</div>

Upvotes: 0

Related Questions