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.
Related
Can you tell what to do so that when I click the box it disappears?
Here's what I've tried:
document.getElementById("box").addEventListener("click",
function(){
document.getElementById("box").style.display = "none";
});
Here are the box properties:
<div id="box" style="height: 150px; max-height: 600px; min-height:
5px; width:150px; max-width: 600px; min-width: 5px; opacity:
1; background-color:orange; margin:50px"></div>
You need a closing curly brace for the function and a closing parenthesis for invoking addEventListener.
document.getElementById("box").addEventListener("click",
function(){
document.getElementById("box").style.display = "none";
});
<div id="box" style="height: 150px; max-height: 600px; min-height:
5px; width:150px; max-width: 600px; min-width: 5px; opacity:
1; background-color:orange; margin:50px"></div>
I created two divs and I want the one div to disappear and appear by clicking the other one. I tried using Jquery and javascript, but it doesn't seem to be working. Basically, I want the blue one to disappear and appear by clicking the red one.
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></div>
use .toggle() for example...
$(function(){
$("#red").on('click', function(){
console.log('click on red div');
$("#blue").toggle( "slow", function() {
// Animation complete.
});
});
});
#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>
<div id="blue"></div>
I am just curious, why don't simply change the selector from id to class (#blue to .blue ) in the CSS:
document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});
#red{
height: 100px;
width: 100px;
background: red;
}
.blue{
height: 100px;
width: 100px;
background: blue;
}
<div id="red"></div>
<div id="blue" class="blue"></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 :)
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>
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
I have two div elements side by side. When i move the mouse over the first and animates it, the next one strangely shakes. See here: http://jsfiddle.net/YqZSv/1/ I've noticed it only happens when padding and border are involved. If i replace border with margin, the 'shaking' effect stops.
HTML
<div class='a'></div>
<div class='b'></div>
CSS
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
}
jQuery
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
I can't use margin instead of border because i use a background image with border origin, so i don't want it to move together with its content.
Any help?
Tell the browser to keep both the padding and the border-width inside the defined height/width so it doesn't think the size is changing:
div.a { box-sizing:border-box; }
http://jsfiddle.net/exvEa/
If you DO NOT Mind some modification... I'd go for CSS Positioning.
Though this will have an additional tag
Something like:
<div id="mother">
<div class='a'></div>
<div class='b'></div>
</div>
and the in your original CSS:
#mother{
position:relative; width:210px;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block;
position:absolute;
left:0px;
}
.b {
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
margin-left: 20px;
position:absolute;
right:0px;
}
jQuery:
$('.a').mouseenter(function(){
$(this).animate({
'padding': 0,
'borderWidth': 10
});
}).mouseleave(function(){
$(this).animate({
'padding': 10,
'borderWidth': 0
});
});
Try that....
http://jsfiddle.net/8jFyL/
If small html/css changes aren't problem:
http://jsfiddle.net/YqZSv/8/
HTML:
<div class="box">
<div class='a'></div>
</div>
<div class="box">
<div class='b'></div>
</div>
CSS:
.box {
width:100px;
height:100px;
margin-right:20px;
float:left;
}
.a {
width: 80px;
height: 80px;
padding: 10px;
border: 0px solid yellow;
background-color: red;
display: inline-block
}
.b {
width: 80px;
height: 80px;
padding: 10px;
background-color: blue;
display: inline-block;
}
Basically, one div as wrapper...