How to catch event on a parent div? - javascript

I would like to ask:
How to make the group displays OVER the divs a and b?
I want to catch event mousedown on group even if a user click on a div a or b.
Basically the group should visually cover the two other divs, so when I click inside the are covered by the group, only group div should detect mousedown.
Notes: I cannot change HTML structure.
document.getElementById('group').addEventListener('click', function(event) {
event.stopPropagation();
alert('click on: ' + event.target.id);
});
#group {
position: absolute;
width: 250px;
height: 250px;
background-color: yellow;
z-index: 2;
opacity: 0.5;
}
#a {
position: absolute;
left: 80px;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
}
#b {
position: absolute;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
}
<div id="group">
<div id="a">A</div>
<div id="b">B</div>
</div>

Use opacity 0 for the children.
Use event.currentTarget instead of event.target.
With this config children are actually above groups, but are not visible and events are caught by groups elem, not children.
document.getElementById('group').addEventListener('click', function(event) {
event.stopPropagation();
alert('click on: ' + event.currentTarget.id);
});
#group {
position: relative;
width: 250px;
height: 250px;
background-color: yellow;
z-index: 2;
opacity: 0.5;
}
#a {
position: relative;
left: 80px;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
opacity: 0
}
#b {
position: relative;
width: 50px;
height: 50px;
margin: 10px;
background-color: blue;
z-index: 0;
opacity: 0;
}
<div id="group">
<div id="a">A</div>
<div id="b">B</div>
</div>

Related

Incrementing .style.transformX on a click event

I'm working on my javascript skills by building a slider...however I've become stuck on this issue.
On every click event I want to increment the px value on a translateX.
My best attempt had the slider working however it was just inserting the inline css on top of the previous click.
HTML
<div class="slider">
<button class="slider__button slider__button--left"></button>
<div class="slider__viewport">
<div class="slider__slide"></div>
<div class="slider__slide"></div>
<div class="slider__slide"></div>
</div>
<button class="slider__button slider__button--right"></button>
</div>
CSS
.slider-wrapper {
height:500px;
}
.slider {
position: relative;
max-width: 1200px;
width: 100%;
height: 500px;
background-color: red;
overflow: hidden;
}
.slider__viewport {
display: flex;
width: 100%;
height: 100%;
}
.slider__slide {
flex-shrink: 0;
max-width: 1200px;
width: 100%;
height: 100%;
background-color: yellow;
border: 1px solid red;
float: left;
}
.slider__slide:nth-of-type(3) {
background-color: purple;
}
.slider__slide:nth-of-type(2) {
background-color: green;
}
.slider__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
z-index: 999;
}
.slider__button--left {
left: 5%;
background-color: blue;
}
.slider__button--right {
right: 5%;
background-color: red;
}
Here is the current code.
const sliderButtonRight = document.querySelector('.slider__button--
right');
const sliderViewport = document.querySelector('.slider__viewport');
const sliders = [...document.querySelectorAll('.slider__slide')];
const sliderWidth = sliders[0].getBoundingClientRect().width;
// The code in question //
sliderButtonRight.addEventListener('click', () => {
sliderViewport.style.transform = `translateX(-${sliderWidth}px)`;
});
// Comment End //
Built-in Javascript only please, no jQuery.
Thank You.

jQuery animation sticking on quick hover

If you hover over the element slowly, the animation works correctly. The green layer overlaps from the left and then, from the top, the yellow layer overlaps the green layer. This overlapping should undo itself when the mouse leaves the element, starting with undoing the yellow overlap and then the green one.
But if the cursor hovers over it too quickly, the animation gets stuck on the yellow overlap until you re-mousover and then mouseout. I've tried adding .stop(false, true) jQuery method before each of the .animate methods, which is what I read has remedied similar problems but this didn't work. I tried it by chaining it right before the .animate function, I tried just about all variations of this, on all of the functions, and also with .stop(true,true);.
Is there a way I can stop the mouseout portion from firing if the mouseover portion doesn't finish before the cursor leaves the element?
$(document).ready(function() {
$('#con').hover(
function() { // handlerIn
$('#crossX').animate({'width': '115px'}, function() {
$('#crossY').animate({'height': '115px'})
})
},
function() { // handlerOut
$('#crossY').animate({'height': '15px'}, function() {
$('#crossX').animate({'width': '15px'})
})
}
)
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
With the following solution it is guaranteed that the "mouse leave part" only runs after the "mouse enter part" is fullfilled and (vice versa).
Additionally the script takes care for the case that on quick user action: "enter > leave > enter" the state remains as if the user haven't done the "quick leave". So actually this should do what you want to achieve (I hope so at least).
var mouseEnter = function() {
// console.log('in');
sPosition = 'in';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseEnterIsWaiting = true;
mouseEnterIsDone = false;
$('#crossX').animate({'width':'115px'}, function(){
$.when($('#crossY').animate({'height': '115px'})).then(function(){sanitizeAnimation('enter')})
})
},
mouseLeave = function() {
// console.log('out');
sPosition = 'out';
if ( !mouseEnterIsDone || !mouseLeaveIsDone ) return mouseLeaveIsWaiting = true;
mouseLeaveIsDone = false;
$('#crossY').animate({'height':'15px'}, function(){
$.when($('#crossX').animate({'width': '15px'})).then(function(){sanitizeAnimation('leave')})
})
},
sanitizeAnimation = function( sMode ){
if ( 'enter' == sMode )
mouseEnterIsDone = true;
else
mouseLeaveIsDone = true;
if ( 'in' == sPosition ) {
if ( mouseEnterIsWaiting ) {
mouseEnterIsWaiting = false;
mouseEnter();
}
} else {
if ( mouseLeaveIsWaiting ) {
mouseLeaveIsWaiting = false;
mouseLeave();
}
}
},
mouseEnterIsDone = true,
mouseLeaveIsDone = true,
mouseEnterIsWaiting = false,
mouseLeaveIsWaiting = false,
sPosition = 'out';
$(document).ready(function(){
$('#con').hover(mouseEnter, mouseLeave);
});
body {
padding: 5%;
}
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
If you need further explanations feel free to leave a comment
$("#con").mouseenter(function() {
$('body').addClass('Hover');
$('#crossX').stop().animate({'width':'115px'},500, function(){
$('#crossY').stop().animate({'height': '115px'},500);
});
});
$("body").mouseenter(function() {
$('body').addClass('Hover');
$('#crossY').stop().animate({'height':'0px'},500,function(){
$('#crossX').stop().animate({'width':'0px'},500);
});
});
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
overflow: hidden;
//background-color: black;
}
#one {
width: 100px;
height: 100px;
background-color: lightgrey;
color:black
}
#crossX {
position: absolute;
top: 15px;
left: 0px;
width: 15px;
height: 100px;
background-color: green;
color: yellow;
}
#crossY {
position: absolute;
top: 0px;
left: 15px;
width: 100px;
height: 15px;
background-color: yellow;
color: white;
}
#black {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: 15px solid black;
z-index: 10;
}
body{
background-color:#dcdcdc;
height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="con">
<div id="one"></div>
<div id="crossX"></div>
<div id="crossY"></div>
<div id="black"></div>
</div>
</body>

Disable click propagation for href

This code snippet explains my case:
$("#b").click(function(e) {
e.stopPropagation();
});
$("#b").click(function() {
alert("trigger div");
});
a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="stackoverflow.com" id="a">
<div id="b">Test</div>
</a>
The problem is that I only want to trigger the click function from the div and not the href from the a tag. In a similar question I found event.stopPropagation(), but that does not work in this case.
You need to prevent the default click event action using event.preventDefault() method.
$("#b").click(function(e) {
e.preventDefault();
alert("trigger div");
});
a {
display: block;
position: relative;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="stackoverflow.com" id="a">
<div id="b">Test</div>
</a>
$("#a").click(function (event) {
event.preventDefault();
});
$("#b").click(function (event) {
event.stopPropagation();
alert("trigger div");
});
without javascript:
#a {
display: block;
position: absolute;
width: 100px;
height: 100px;
background-color: gray;
}
div {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
<a href="stackoverflow.com" id="a">
<div onclick="alert('trigger div')">test</div>
</a>

Mouseover Mouseout with overlapping content

When I mouseover the div with class=background (the little green square in the demo) I fade in the div with class=hover (displaying the grey and blue divs in the demo).
The grey partially overlaps the .background and I can move the mouse around inside it without triggering the mouseout on .background.
But..
If I move the mouse outside the grey div (to hover over the blue for example) then the mouseout on .background gets triggered.
How can I prevent this from happening so that as long as I am hovering over the newly displayed .hover div the mouseout on '.background' will not be triggered?
$('.AddDiv').on('click', function() {
var html = '<div class="container"><div class="background"></div><div class="hover"></div></div>';
$('.Wrap').prepend(html);
});
$(".Wrap").on("mouseover", ".background", function() {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function() {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.content {
width: 170px;
height: 120px;
background-color: grey;
position: relative;
left: 15px;
top: 15px;
}
.navigation {
width: 190px;
height: 40px;
background-color: blue;
position: relative;
top: 30px;
left: 5px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background"></div>
<div class="hover">
<div class="content"></div>
<div class="navigation"></div>
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
Use mouseleave instead of mouseout:
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseleave", ".hover", function () {
$(this).fadeOut(200);
});

Allow Scrolling in DIV when hovering a fixed element

I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>

Categories