Content Editable inside a carousel causing the event propagation - javascript

I am creating a editable div dynamically with the following line.
<div class='reflection-field' contenteditable="true" data-number="${index}"></div>
Expected: When I click on the rendered div, i expect it to show the cursor at the start.
Issue: This div is inside of a "Slide" div of a Carousel. So, when I click on this content editable div, it propagates the event and activates the event to the parent carousel which activates the "grab slide" event. This leads to a "Move" mouse pointer and NO cursor inside the editable.
I am using jQuery & owl Carousel 2 in this project.
$(".reflection-field").click(function( event ) {
event.stopPropagation();
});
and this
$(".owl-carousel").on("click",".reflection-field", function( event ) {
event.stopPropagation();
propStopped( event )
});
function propStopped( event ) {
if ( event.isPropagationStopped() ) {
console.log("called");
} else {
console.log("not called");
}
}
//called
But, its not happening. Will really appreciate the help.
jsfiddle: https://jsfiddle.net/pr2wn6ug/

Ok, here is the deal.
The "mousedown" evokes the grab in the Owl-Carousel-2.
So this made it work
$(".reflection-field").on("click tap mousedown", function( event ) {
event.stopPropagation();
});

We can intentionally enable or disable draggable feature at run-time. Below code will work for Owl-Carousel and other similar problem:
$(".reflection-field").draggable()
.click(function() {
$(this).draggable({ disabled: false });
}).dblclick(function() {
$(this).draggable({ disabled: true });
});
Don't forget to add jQuery-ui library to make it work.
​

Related

Jquery click event targeting more than one element

Codepen is here
I have two triggers on an image. General behaviour:
When I click a trigger, it should reveal a small context box (got this working)
When I click outside of the context box OR the trigger, it should disappear (got this working)
When I click another trigger, if there is another trigger/context box that is already active/open, it should close the other one and open the recently click one (not working)
Here's the html:
<span class='pulse-button' id="button-1"></span>
<div class="content-box context-closed tabs" id="tabs1">
</div>
Here's my jQuery:
$(function(){
$(".pulse-button").click(function(e){
e.stopPropagation();
if( $(".pulse-button").not(this).hasClass("pulse-button-active")){
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}else{
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
};
});
$("body").click(function(evt){
if(evt.target.class == "content-box")
return;
if($(evt.target).closest('.content-box').length)
return;
if( $(".pulse-button").hasClass("pulse-button-active")){
$(".pulse-button").removeClass("pulse-button-active");
$(".pulse-button").next().addClass("context-closed");
};
});
$( "#tabs1,#tabs2" ).tabs();
});
What could I be doing wrong here?
You don't need the else in your .pulse-button click. Because the code in else block should be executed either any .pulse-button has class pulse-button-active or not. Change the your click event like following.
$(".pulse-button").click(function(e){
e.stopPropagation();
if($(".pulse-button").not(this).hasClass("pulse-button-active")) {
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
});
UPDATED PEN

Jquery menu Anchor onBlur event disables Div sub anchors

I am new to JQuery Development. I am facing a issue with the onblur event, while i am trying to make a custom menu for my website. could any one help me with this please.
Please find ths JS fiddle JS Fiddle
$(document).ready(function () {
$('#showmenu').click(function (e) {
e.preventDefault();
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
});
$('#showmenu').blur(function (e) {
$('#serviceMenu').hide();
});
});
The issue is that the show/hide div mechanism is based on a <a> tag. on clicking <a> the menu is toggling fine. i also want menu to toggle, when the user clicks anywhere outside the menu and the appearing div. In the fiddle i have added onblur() event for the anchor, that is making my sub links inside the div trigger onblur() event of main anchor, and hiding the menu. I tried to block event.propagation(), but its not working for me.
The problem here is, that the blur event is called, BEFORE you click on a#serviceMenu
You also should learn how the event-propagation works: Direct and delegated events
I updated your fiddle (with some comments): http://jsfiddle.net/M4LJh/7/
$(document).ready(function () {
$('#showmenu').on('click', function (e) {
this.focus();
$('#serviceMenu').slideToggle("fast");
$('#Contact').hide();
return false;
});
// prevent clickEvent to bubble up to #showmenu
$('#serviceMenu a').on('click', function(e){e.stopPropagation();});
// hide #serviceMenu on bodyClick
// - anywhere but an element with propagation stopped event
$('body').on('click', function (e) {
$('#serviceMenu').hide();
return false; // e.stopPropagtaion(); + e.preventDefault();
});
});

Carousel animation event issue

I have an issue with a carousel I have built. It has elements inside a container which are moved 'left' by the size of the visible container when the button with class moveCarouselRight is clicked.
My issue is that when the user clicks too fast, ie double click, the animation seems to fire twice, meaning the elements are not properly fitted in the container as if the first 'left' operation had not completed.
As you can see I tried to fix this with the 'disabled' flag but it seems the second click event is fired before the js from the first event has reached that line of code.
var disabled = false;
$('.moveCarouselRight').on('click', function() {
if (!disabled) {
disabled = true;
//change css property 'left' depending on container size
disabled = false;
}
});
Link to jsFiddle:
jsfiddle.net/6TPcT/5
Use this:
JS
$(".moveCarouselRight").dblclick(function(event){
event.preventDefault();
});
OR
$(".moveCarouselRight").dblclick(function(event){
return false;
});
OR
$(".moveCarouselRight").one("click", function(event) {
//do something
});
Link: http://api.jquery.com/one/
I fixed this by binding a click event to the selector on load:
$('.selector').click(moveLeft);
In the method I unbound the click event:
function moveLeft() {
$(this).unbind('click');
//css transition stuff
}
Then, I added a listener to the end of the css transitions:
$("selector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$(this).siblings('.nextThree').click(moveThreeRight);
});
Works a charm :)
Thanks for the help on this

Stop propagation not working, avoid children click trigger other function

I write simple overlay for my page, kind of lightbox, but is going to do other stuff, anyway, My bigger problem in this tests... is I want when you click the overlay mask, the overlay close... But if you click in the children div, like the content div inside the overlay the overlay must remain open.. (which is not, that's the problem)
http://jsfiddle.net/7Cr2V/
How can I say in Javascript, if I click a child div of "overlayfull" please do not close or hide the overlayfull ... here is my code.. and above is the js fiddle if you want to check it cause my English is very bad.
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
$('div.overlayfull').click(
function(event) {
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
One solution is to add a click handler to the children, in which you stop propagation:
$('div.overlayfull').children().click(function(event){
event.stopPropagation();
});
stop propagation only works for parent elements it doesnt not stop the active element itself. you can encompass the text with a class and return false if clicked on that
<div id='my-video'></div>
<div class="message">CLIC HERE MUST NOT CLOSE THE OVERLAY</div>
</div>
if (event.target.className === 'message')
return false;
http://jsfiddle.net/59trN/
I think this is the simplest way to do it if I understand the question correctly. I just check within your handler to see if the div getting clicked on is the one you don't want to close the modal, and return from the function before the fadeout is triggered:
$('div.overlayfull').click(
function(event) {
if ($(event.target).hasClass('videoquon')){
return;
}
event.stopPropagation();
$('div.videoquon').fadeToggle(300);
$('div.overlayfull').fadeToggle(300);
}
);
Check out the fiddle http://jsfiddle.net/aRDKS/
Either have an event for the divs inside overloay div and stoppropagation on that. Inorder to stop the Propagation of event occurring on the children of a parent which has that particular event's handler, either check for the target from where the event generated in the paent handler or add a handler for the children and apply event.stopPropagation() to avoid the event bubbling up to the parent.
$('div.overlayfull div').click(function (e) {
e.stopPropagation()
});
or check for the target's id from which the event was generated:
function (event) {
if (event.target.id == 'overlayfull') { // Check here if the event originated from the intended div itself
$('div.videoquon').fadeToggle(300);
$(this).fadeToggle(300);
}
});
Fiddle

Can't hide popup when clicked on draggable object

So here is my fiddle
http://jsfiddle.net/C4CcA/4/
The problem is that I am not able to hide the yellow popup when I click on div2 (because it is draggable). If I can catch the event triggered when clicked on div2 will be much better.
Any work around?
add this
$("#div2").draggable().click(function(ev) {
if (ev.target === this) {
$(this).focus();
}
});
otherwise you can use delegate or on
A small work around
$(function(){
$("#div2").draggable();
$("#txtbox").click(function(event){
event.stopPropagation();
$("#colorpicker").show();
});
$("#txtbox").blur(function(){
$("#colorpicker").hide();
});
$('#div2').click(function() {
$("#colorpicker").hide();
});
});
I am just stopping the propagation to div2 when you click on textbox. Otherwise it will hide the colorbox again.
I managed to do it with mouseDown event
$("#div2").mousedown(function() {
$("#colorpicker").hide();
$("#txtbox").blur();
});
The fiddle is here - http://jsfiddle.net/C4CcA/19/

Categories