I have a parent div element, and within it a child div element. Now there is a click handler for the child div, it brings a drop down(like a menu).
Requirement - Is to bring the dropdown on click of the parent div also.
Note - on click of parent div, and firing childdiv.click() won't work, infinite loop.
Cannot do a stoppropagation, functionality for bringing the dropdown won't work.
$(document).ready(function(){
$("#child").click(function(){
$("ul").slideUp();
})
$("#parent").click(function(){
$("#child").trigger("click");
})
})
#parent {
padding: 50px;
background: red;
}
#child {
height: 50px;
background: green;
color: white;
}
li {
background: rgba(0,0,255,0.3);
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">Parent
<div id="child">
Child
<ul id="menu" class="hide">
<li>menu1</li>
<li>menu2</li>
</ul>
</div>
</div>
Try this adding the parent onclick event handler and then use event.stopPropagation to stop event bubbling.
$("#child").click(function(e){
e.stopPropagation();
$("ul").slideToggle();
});
$("#parent").click(function(e){
$("#child").trigger("click");
});
CHECK FIDDLE is this what you want? Not sure what you want to do next. Adding your code would have been much easier to help.
Related
I created an editable field based on "contenteditable="true" and it is working well. Content is saved to the database when the user clicks out of the div (blur).
However, when I inject an additional field with Jquery after the first one, the new field does not send content to the database when the user clicks out of the div.
I reproduced the problem in this snippet (see the console).
Any clue ?
$(document).ready(function () {
codetoinject = '<div contenteditable="true">Editable text 2</div>'
$(document).on("click", "#abutton", function (event) {
console.log("Ok");
$('#receptionarea').append(codetoinject);
})
})
$('.editablediv').blur(function () {
console.log("save content with Ajax");
// Ajax code
});
#abutton {
cursor: pointer;
border: solid;
width: 120px;
border-radius: 5px;
text-align: center;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="abutton">
Click here
</div>
<div id="receptionarea">
<div class="editablediv" contenteditable="true">Editable text 1</div>
</div>
The .blur function is only being applied to elements with the editablediv class, which you are not giving to the dynamically added div. Also, you'll need to modify the way you are setting up the blur event handler to use event delegation for dynamically added elements.
Also, you can set up a click event handler directly on your button. There's no need to use event delegation there.
$(document).ready(function () {
$('#abutton').on("click", function (event) {
$("#receptionarea").append('<div contenteditable="true" class="editablediv">Editable text 2</div>');
});
// You must set up event delegation for dynamically
// added elements to get hooked up to events.
$("div").on("blur",'.editablediv', function () {
console.log("save content with Ajax");
// Ajax code
});
});
#abutton {
cursor: pointer;
border: solid;
width: 120px;
border-radius: 5px;
text-align: center;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="abutton">Click here</div>
<div id="receptionarea">
<div class="editablediv" contenteditable="true">Editable text 1</div>
</div>
I have the following javascript that adjusts my div height when a user clicks trend_exp_bt.
It works fine at the moment. However, if the user clicks trend_exp_bt again, i want to reset the div height (130px).
Please can someone show me how to do this, i've tried to look at toggle function on google but these don't seem to be working for me.
<script>
$('.trend_exp_bt').click(function(){
$('.trending_contain').animate({height:'500'})
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
})
</script>
Maybe toggling a class would work for you?
document.getElementById('trend_exp_bt').onclick = function() {
document.getElementById('exp-panel').classList.toggle('expanded')
}
.panel {
width: 250px;
height: 130px;
border: 1px solid blue;
background-color: lightgrey;
transition: all 0.3s;
}
.expanded {
height: 300px;
}
<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>
If you want to use click handlers, you will have to remove the "expand" handler and add a "collapse" handler after it is expanded. You will have to do the opposite when a user collapses the div element.
function expandDiv() {
$('.trending_contain').animate({height:'500'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
$('.trend_exp_bt').off('click').on('click', collapseDiv)
}
function collapseDiv() {
$('.trending_contain').animate({height:'200'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∨");
$('.trend_exp_bt').off('click').on('click', expandDiv)
}
$('.trend_exp_bt').click(expandDiv);
I am wondering if it is possible to change the style of child when its element was hovered, while its css was also styled when its parent was hovered?
To make my question clear, I wrote down a basic code below:
//styling child while mouse is inside child element
$('child').on('hover', function(e){
if (e.type == 'mouseenter'){
$(this).css('background','yellow');
}
})
// styling child while mouse is inside parent
$('child').parents().on('hover', function (e){
if (e.type == 'mouseenter'){
$(this).css('background', 'blue');
}
})
So, basically once user enters space of parent to make child's bg blue, and once it enters space of child to change from blue to yellow bg.
I saw a comment on why I do not use css, so this is a little explanation: I am unable to select parent element. I can only do it from child using parents(). And as long as css does not support parents() method yet I went with jquery. :)
CSS Alone:
div {
padding: 20px;
border: 1px solid black;
}
/* something hovered that have .child as direct child => change .child color to blue */
*:hover > .child {
background-color: blue;
}
/* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */
.child:hover {
background-color: yellow;
}
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
is that the behaviour you expect ?
$('#child').parent().on('mouseover', function(e){
if(this===e.target){
$(this).children().css('background','blue');
}else{
$(this).children().css('background','yellow');
}
}).on('mouseout', function(e){
$(this).children().css('background', 'green');
});
#parent{
width:200px;
height:100px;
background-color:#f00;
}
#child{
width:30px;
height:30px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
HTML:
<div onclick="doSomething()" id="parent">
<div id="child"></div>
</div>
CSS:
#parent {
background-color: blue;
width: 100%;
height: 100px;
}
#child {
background-color: green;
width: 50%;
height: inherit;
}
.myClass {
background-color: red !important;
}
JS:
function doSomething() {
event.target.className = ('myClass');
}
As you can see in this JSFIDDLE, upon clicking the child, instead of applying the class to the parent which triggers the function, it applies it to the child. I want to know how to avoid this and apply it to the parent no matter where I click inside of it. I am trying to avoid using the document.getElement(s)ByClass/Id method.Any help?
You can refer to the element that handles the event with currentTarget.
Identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
However, instead of relying on the browser to provide a global event object, I would pass it to the function:
onclick="doSomething(event)"
You can also refer to the element the handler is bound to with this:
onclick="doSomething(event, this)"
Of course please consider to not use inline event handlers.
Just reference the target in your javascript call:
function doSomething(target) {
target.className = ('myClass');
}
#parent {
background-color: blue;
width: 100%;
height: 100px;
}
#child {
background-color: green;
width: 50%;
height: inherit;
}
.myClass {
background-color: red !important;
}
<div onclick="doSomething(this)" id="parent">
<div id="child"></div>
</div>
To get the immediate parent element of the clicked element you can use the 'path' array of the event. Path provides an array which includes every element in ascending order from the element you clicked to the top of the DOM.
Having trouble working out the exact browser support for this though.
var children = document.querySelectorAll('[id^="child-"]'),
clickEvent = function(event) {
console.log(event.path[0]); //prints clicked child element
console.log(event.path[1]); //prints parent
event.path[1].classList.toggle('row'); //toggles row or column mode of parent
event.path[0].classList.toggle('selected'); //toggles color of child
};
children.forEach(function(child) {
child.addEventListener('click', clickEvent);
});
<div id="parent">
<div id="child-1">Child One</div>
<div id="child-2">Child Two</div>
<div id="child-3">Child Three</div>
<div id="child-4">Child Four</div>
<div id="child-5">Child Five</div>
</div>