Detect click inside/outside div - javascript

.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 :)

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>

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>

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>

Related

smoothscroll to target on certain div

I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.
I'm trying this way, but didnt work. Is it possible scroll to target if its inside div
$(document).ready(function(){
$('button').click(function(){
$('.box').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:
$(document).ready(function() {
$('button').click(function() {
$('.left').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box {
clear: both;
}
.left {
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find {
margin-top: 400px;
}
#find p {
background-color: green
}
.right {
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.
$(document).ready(function(){
$('button').click(function(){
var bt = $("#find").offset().top;
$('.left').animate({
scrollTop: bt
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>

Need to change position of element on slideToggle

$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.
The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>

Click on overlapping div using pointer-events and hide div

I made this code so that once you click the "inner div", click go to the "outer div" using the "pointer-events: none;" in CSS.
$("#outer").click(function(){
alert("outer clicked")
});
$("#inner").click(function(e){
alert("inner clicked")
this.style.display = 'none';
e.stopPropagation();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
}
#inner {
pointer-events: none;
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
OK, the function is perfect. But if you click anywhere within the outer div, I need the inner div to hide. I tried using this.style.display = 'none';, but it does not work.
You only need one event listener on #outer, to hide the inner div when #outer has been clicked.
$('#outer').click(function (e) {
$('#inner').hide();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
}
#inner {
pointer-events: none;
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
$("#outer").click(function(){
alert("outer clicked")
});
$("#inner").click(function(e){
alert("inner clicked")
this.style.display = 'none';
e.stopPropagation();
});
#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;
position:relative;
}
#inner {
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;
z-index:10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>
In your example, the use of pointer-events is to allow click or tap behaviour to “pass through” an element to another element.

Push other divs to the right

Im trying to slide in a div then move 3 other divs.
I have fiddle showing how I want to do it. But its not 100% correct.
If you check the fiddle you will see it slides in when you press "Press me". But instead of going over the 3 red divs I want it to push them to the side.
Fiddle with code
HTML
<div class="wrapper wrapper-content">
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div id="red">Press Me</div>
<div id="red"></div>
<div id="red"></div>
</div>
</div>
CSS
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:absolute;
height:100%;
z-index:1;
}
.container {
border: 2px solid #73AD21;
width:100px;
}
Script
$(function()
{
$("a#toggle-menu").click(function()
{
$("#effectMenu").animate({width:'toggle'},350);
return false;
});
});
Change the id to a class,toggle a class to the items called left,in the css animate the transition of adding the class using css transitions
<div class="container" style="position:relative">
<div id="effectMenu"></div>
<div class="red">Press Me</div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
$(function() {
$("a#toggle-menu").click(function() {
$("#effectMenu").animate({
width: 'toggle'
}, 350);
$(".red").toggleClass('left');
return false;
});
});
.red {
background-color: red;
height: 50px;
margin-top: 2px;
width: 100px;
position: relative;
transition: all 350ms ease-in-out;
}
#effectMenu {
display: none;
background: grey;
color: #FFF;
width: 30px;
position: absolute;
height: 100%;
z-index: 1;
}
.container {
border: 2px solid #73AD21;
width: 100px;
}
.left {
margin-left:30px;
transition: all 350ms ease-in-out;
}
https://jsfiddle.net/ygmbnwgL/
Using float and relative position instead of absolute one, you can do it :
CSS code :
#red {
background-color:red;
height:50px;
margin-top: 2px;
width: 100px;
position:relative;
float: left;
}
#effectMenu
{
display: none;
background: grey;
color: #FFF;
width:30px;
position:relative;
height:150px;
z-index:1;
float: left;
}
.container {
border: 2px solid #73AD21;
width:150px;
}
See this fiddle

Button activated div slide goes under instead of over

I was trying to build an interface where when you click a button a full sized div with all it's content fills up the whole screen. There are two sliding divs, it works one way, but the other way the div slides under the first div.
I was attempting to use toggle - and switch to a css that increases the DIVS width property to take over the screen.
Is there a way to accomplish this? Here is my code and a fiddle at the bottom:
HTML:
<div class="container">
<div class="left">
<div class="one">
<a href="#"><div class="openone">
<div class="vertical-text-one">OPEN ONE</div>
</div></a>
ONE</div></div>
<div class="right">
<div class="two">
<a href="#"><div class="opentwo">
<div class="vertical-text-two">OPEN TWO</div>
</div></a>TWO
</div></div>
<div class="header" >
TOP
</div>
</div>
Javascript:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
});
});
CSS snippet:
.left{
background-color: #06C;
width:50%;
height: 100%;
overflow:hidden;
float:left;
z-index: 1;
transition: width 1s;
}
.left.clicked {
width: 98%;
background-color: #06C;
z-index: 100;
}
.right{
background-color: #3AD;
float:right;
width:50%;
height: 100%;
z-index: 1;
transition: width 1s;
}
.right.clicked {
width: 98%;
background-color: #3AD;
z-index: 100;
overflow: hidden;
}
.two{
position:absolute;
top: 110px;
}
.one{
position:absolute;
top: 110px;
}
.openone {
position: relative;
height: 50%;
width:200px;
background-color: #06C;
left: 101%;
}
.opentwo {
position: relative;
height: 50%;
width:200px;
background-color: #3AD;
left: 0px;
}
http://jsfiddle.net/hmyLrzta/19/
Just expand your coding with this:
$(document).ready(function(){
$('.openone').click(function(e){
$('.left').toggleClass('clicked');
$('.right').toggleClass('hidden');
});
$('.opentwo').click(function(e){
$('.right').toggleClass('clicked');
$('.left').toggleClass('hidden');
});
});
CSS:
.hidden {
display: none;
}
This will render the not active panel invisible using display: none;
http://jsfiddle.net/hmyLrzta/21/

Categories