$('.parent').on('click', function(e) {
if (e.target.matches('.inside')) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Click on inside and you'll get title in console.
How to get inside regardles a title is inside or not?
You need to check if the target has a parent .inside :-
$('.parent').on('click', function(e) {
if ($(e.target).parents('.inside').length) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Okay take a look at this and see if it works for you?
https://codepen.io/jamie-endeavour/pen/GPjzRq?editors=1011
$('.parent').on('click', function(e) {
var $target = $(e.target);
if ($target.hasClass('inside') || $target.parent().hasClass('inside')) {
console.log('inside');
} else {
console.log('not inside');
}
});
I am checking if the user has clicked on the element with the 'inside' class or if the child element belongs to the 'inside' element.
Hope this helps?
Please note that HTML works in layer so if title is going to be inside "inside", you can just target title for click as inside is always "inside" it.
$('.title').on('click', function(e){
console.log('inside');
});
.parent{
background:lightgreen;
}
.inside{
background:silver;
}
.title{
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Related
I'm trying to figure out how to hide the div which is the overlay only when the overlay is clicked and not any of its children (ie: the content):
modal.addEventListener('click', destroy, false);
function destroy(e) {
if (e.target.id === overlay.id) {
window.location.reload(false);
}
}
Your if condition is working but you don't hide something. For that you could add a class (for example .hidden) and define for that class display: none.
Working example:
const modal = document.querySelector('#modal');
const overlay = document.querySelector('#overlay');
modal.addEventListener('click', destroy, false);
function destroy(e) {
if (e.target.id === overlay.id) {
e.target.classList.add('hidden');
}
}
#overlay {
height: 50px;
background-color: yellow;
}
p {
background-color: red;
}
.hidden {
display: none;
}
<div id="modal">
<div id="overlay">
<p>test</p>
</div>
</div>
I have multiple hoverable divs which change when being hovered... When i get off them with the mouse they return to their normal position. I would like for them to stay hovered unless another div with the same class gets hovered. So one should stay hovered. Sort of like being able to select only one div but with hovering
I tried everything that is in my knowledge
<html>
<head>
<style media="screen">
.hoverable:hover {
background-color: red;
}
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="hoverable">
lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
</body>
</html>
hope you are looking for something like this
$("div.hoverable").hover(function() {
$("div.hoverable").removeClass("hovered");
$(this).addClass("hovered");
})
div.hoverable {
height: 30px;
width: 300px;
background-color: #ccc;
border: 1px solid #666;
margin: 5px;
}
div.hovered {
color: red;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoverable">
1
</div>
<div class="hoverable">
2
</div>
<div class="hoverable">
3
</div>
<div class="hoverable">
4
</div>
There are a few ways you could accomplish this. The easiest that comes to mind is to not use the browser hover style but apply a class dynamically only on mouseenter:
let lastHovered = null;
const onHover = (event) => {
if (lastHovered != null) {
lastHovered.classList.remove('hovered');
}
event.target.classList.add('hovered');
lastHovered = event.target;
}
for (const div of document.getElementsByClassName('hoverable')) {
div.onmouseenter = onHover;
}
Here's an example: https://codepen.io/minism/pen/PooRKqx
I wouldn't use the :hover pseudo-class. Instead, define a class and toggle it with the mouseover event.
var elArray = document.querySelectorAll('.hoverme');
elArray.forEach(function(el) {
el.addEventListener('mouseover', function() {
elArray.forEach(function(el) {
el.classList.remove('hovered');
});
this.classList.add('hovered');
});
});
Working example: https://codepen.io/peiche/pen/wvvmqGZ
Following is my code
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else if(event.target === close[0]) {
container.hide();
} else {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
Here, what does not work, is when I click on the close div, the container does not close. I am very confused why it does not work. Could someone help me with this along with some insights on why it did not work with my code.
Thanks
Jeff
The close button is inside the container div so $(event.target).closest(container).length would be truthy and second else if doesn't meet. So give higher priority to the close div by updating the order of if statements.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if (event.target === close[0]) {
container.hide();
} else if (event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else {
container.hide();
}
}
init();
});
.container {
width: 400px;
height: 400px;
background-color: red;
position: relative;
//display:none;
}
.closeButton {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
The problem is in "|| $(event.target).closest(container).length" - that will be true for clicking on the close button. So instead of going to else if and else parts, it'll be true even for click button and it'll try to show the container. See updated snippet.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0]) {
container.show();
} else if(event.target === close[0]) {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
I have a click event binded to the body element but I don't want it to fire for when the user clicks on certain elements, that being when the element has an attribute of data-dropdown-target, however what I have tried isn't working, it always fires.
CodePen: http://codepen.io/anon/pen/ORQkrb
HTML:
<body>
<div class="foo">foo</div>
<div class="bar" data-dropdown-target="something">bar</div>
<div class="moo">moo</div>
</body>
CSS:
.foo, .bar, .moo {
padding: 10px;
margin: 5px;
}
.foo {
background-color: gray;
}
.bar {
background-color: teal;
}
.moo {
background-color: green;
}
JS:
$('body').not('[data-dropdown-target]').on('click', function(e) {
console.log('Hi!');
});
I assume this is because it is trying to remove body elements that have this attribute, rather than it's children - correct?
How do I go about stopping it from firing on children elements that have this attribute - do I have to loop through everything, as I would like to avoid that because of performance reasons, especially since it's on the body.
Actually your code try to bind event click on every <body> without data-dropdown-target attribute.
This could solve your problem :
$('body').on('click', function(e) {
if($(e.target).data('dropdown-target') || $(e.target).parents('[data-dropdown-target]').length !== 0) return false;
console.log('Hi!');
});
.foo, .bar, .moo {
padding: 10px;
margin: 5px;
}
.foo {
background-color: gray;
}
.bar {
background-color: teal;
}
.moo {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="foo">foo</div>
<div class="bar" data-dropdown-target="something">bar</div>
<div data-dropdown-target="something">
<div class="moo">moo</div>
</div>
</body>
The not selector just remove the body element if it has [data-dropdown-target] attribute.
Remove elements from the set of matched elements.
$('body').on('click', function(e) {
console.log('Hi!');
});
$('[data-dropdown-target]').on('click',function(e){
return false;
});
Let me explain it in a few words.
I have a menu with different colored buttons. For example When I mouseover/click button A (=blue e.g.) I want the bgcolor of the div also turning blue.
When I mouseover/click button B (=green) I want the bgcolor of the div also turning green.
Is there a possibility to this with a simple script?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").hover(function () {
$(this).parents("navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
/* CSS */
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
Use this for start you can enhance this with your own coding logic.
$('input:button').each(function() {
var color = $(this).attr("data-color");
$(this).css("background-color", color);
});
$('input:button').click(function() {
var color = $(this).attr("data-color")
$('#wrapper').css("background-color", color);
});
#wrapper {
padding: 50px;
background-color: #d0e4fe;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<input type="button" name="color" data-color="red" value="Red">
<input type="button" name="color" data-color="green" value="Green">
<input type="button" name="color" data-color="purple" value="Purple">
<input type="button" name="color" data-color="#d0e4fe" value="Default">
</div>
This is how I would do it:
$("button").hover(function () {
$(this).parents("div").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("div").css("background-color", "white");
});
Here is the JSFiddle demo
Full code after fix as per what you provided in your edit:
<html>
<head>
<style>
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").hover(function () {
$(this).parents("#navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("#navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
Try using jquery:
$("#[id]").hover(function({
$("#[id]").css({"[propertyname]":"[value]","[propertyname]":"[value]",...});
/*
Fill the brackets with the correct ids / classes and property names and values.
If you want to change the background on a click then replace .hover with .click
*/
If anyone finds something I did wrong or if there is a better way to do it, please correct me or let me know! I'm always open to better ideas! :)
If you're going to use CSS, there's only two ways of changing the style of an element through the state of another:
The targeted element must either be a child of the element receiving a state change, or a direct sibling (right underneath).
Using CSS's "+" selector, you can affect the next sibling element.
In your case this could be used to achieve this effect:
https://jsfiddle.net/Lrptjoh9/
The action occurs here:
.a .button:hover + .bg {
background: red;
}
.b .button:hover + .bg {
background: blue;
}
Although this requires the button and background elements to be siblings.
Vanilla JavaScript:
var btn = document.getElementById('btnA');
btn.addEventListener('click', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode,
color = parent.style.backgroundColor;
if(color === 'blue') {
parent.style.backgroundColor = 'white';
} else {
parent.style.backgroundColor = 'blue';
}
});
btn.addEventListener('mouseover', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode;
parent.style.backgroundColor = 'blue';
});
btn.addEventListener('mouseout', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode;
parent.style.backgroundColor = 'white';
});
.container{
position: relative;
width: 200px;
height: 100px;
text-align: center;
}
.container button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<button id="btnA">Button A</button>
</div>