How to stop event propagation in jQuery click function inside click function? - javascript

I'm having troubles stopping click event propagation. I have a click function inside another click function.
Here's what I'm trying to achieve:
Select a label by clicking it
Then click inside the box to determine which label was clicked
This works fine if you select labels one by one. But if you click on Label 1 and then Label 2, both events are recorded (see console log). Or if you click on Label 1 five times and then click inside the box, all five events are captured.
How can I stop this event propagation?
JSFiddle: https://jsfiddle.net/q930bvff
var objectName, currentObject;
$('.label').click(function(event) {
$('.label').removeClass('selected');
$(this).addClass('selected');
objectName = $(this).attr('id');
currentObject = $(this).hasClass('selected');
if (currentObject) {
$('#box').one('click', function(e) {
console.log(objectName);
});
}
event.stopPropagation();
});
html,
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1em;
}
.label {
padding: 12px;
border-radius: 4px;
background: #000;
color: #fff;
display: inline-block;
cursor: pointer;
}
.label.selected {
background: green;
}
#box {
height: 300px;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>

Use $('#box').off("click") before every new .one("click" to kill all the previously created click handlers on #box.
See working snippet below:
var objectName, currentObject;
$('.label').click(function(event) {
$('.label').removeClass('selected');
$(this).addClass('selected');
objectName = $(this).attr('id');
currentObject = $(this).hasClass('selected');
if (currentObject) {
$('#box').off("click").one('click', function(e) {
console.log(objectName);
});
}
event.stopPropagation();
});
html,
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1em;
}
.label {
padding: 12px;
border-radius: 4px;
background: #000;
color: #fff;
display: inline-block;
cursor: pointer;
}
.label.selected {
background: green;
}
#box {
height: 300px;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>

Related

javascript toggle not working whenclicked but css works when a button is hovered over

I want a button to display some text when clicked. the button is changing color when i hover over it but its not displaying text when clicked here tis the css and javascript.
css:
button {
background-color: #f2c33c;
font-size: 20px;
color: #000000;
padding: 10px;
border-radius: 10px;
border: 3px solid #808080
}
button:hover {
background-color: #7cc272;
color: #333333;
}
.hidden {
display: none;
}
.showing {
display: block;
font-family: Arial, sans-serif;
background-color: #509fcb;
color: #000000;
width: 400px;
padding: 20px;
margin-top: 20px;
border-radius: 20px;
}
js:
document.querySelector(".clickme").addEventListener("click", () => {
document.querySelectorAll(".hidden").forEach((item) => {
item.classList.toggle(".showing");
});
});
You dont need to specify the . on the class that your toggeling.
So your code would look like this:
document.querySelector(".clickme").addEventListener("click", () => {
document.querySelectorAll(".hidden").forEach((item) => {
item.classList.toggle("showing");
});
});

How to enable Froala editor inside the wrapper div?

I'm trying to apply Froala editor on the button tag. But I want it to open using the wrapper div click. I've added the two demos on this question, please check and anyone is knowing the solutions, please help me.
Demo1:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed....');
}
}
});
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/>
<div id="banner-message">
<p>Hello World</p>
<button id="editor">Change text</button>
</div>
This first snippet will open the buttontext in popup to edit on second click.
Demo2:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
banner.on("click", function(){
new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed');
}
}
})
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<link href="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button id="editor">Change color</button>
</div>
Here in the second demo, I've used the wrapper click event to initialize the froala editor.
My Need: On the click of banner-message div I want to open the froala editor popup to edit the button content.
If anyone can help me to resolve this issue it would be great. Thanks in advance.
Here is the code that you can try:
var test= new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed');
}
}
});
also, a running Jsfiddle sample: click here

event namespace not working in "mouseup" event

I'm trying to achieve event.namespace on a mouseup event but it doesn't seem to work, it always logs undefined
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event)
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace)
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Here's a fiddle of what I tried: http://jsfiddle.net/xpvt214o/221833/ Any idea?
You are doing it in a wrong way. Try this.
var banner = $("#banner-message")
var button = $("button")
$(document).on("namespace.someNamespace", function(event) {
console.log(event);
console.log(event.namespace);
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
});
$(document).on("mouseup", function(event) {
$(document).trigger('namespace.someNamespace');
});
You need a normal event (e.g. mouseup) to trigger the namespace event.
event.namespace is used by jQuery plugins to organize custom events
event.namespace | jQuery API Documentation
This will likely be used primarily by plugin authors who wish to handle tasks differently depending on the event namespace used.
Whatever you are trying to do, it seems like a namespace isn't the tool you're looking for.
you need to trigger mouseup.namespace
example here https://api.jquery.com/event.namespace/
also, change your namespace name from mouseup.namespace as it will trigger the event twice
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event);
banner.toggleClass("alt");
$(this).trigger("mouseup.namespace");
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace);
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>

jQuery animation on negative margin - unexpected results

Project Outline
I am building a web page with a slide out menu, which works as expected and the display stays the way I expect it would during the animations to slide the menu in/out.
This is working correctly on the following browsers;
Windows
Internet Explorer (11.0.9600.17239)
Firefox (32.0)
Opera (17.12)
Chrome (38.0.2125.44 beta-m)
Mac
Opera (12.15)
FireFox (32.0)
Chrome (36.0.1985.125)
Safari (6.0.5)
iOS
Chrome (37.0.2062.52)
Safari (Iphone 5s - can't find version number)
Problem Browser
The problem seems to only be with Safari on windows (5.1.7);
The Issue
When you click to slide out the menu, it appears to reload and slide in from the right, when it is off-page to the left, so I'd assume it should come in from the left like every other browser I've tried!
When the menu is out and you press for it to slide back in, it seems to slide off to the left and then slide back out from the right and all the way off the left again.
Related jsFiddle link and code
(Link at the end of post)
JS
$(document).ready(function () {
// Set menu_out var, for clicks to activate slideIn/Out
var menu_out = false;
// Works if menu is in OR out;
$(".top_button").click(function () {
menu_move();
});
$('#menu a').click(function () {
menu_move();
});
// Only work if menu if out;
$('#content').click(function () {
if (menu_out == true) {
menu_move();
}
});
function menu_move() {
if (menu_out) {
$('#menu').animate({
'margin-left': "-71%"
}, 300, function () {
menu_out = false;
});
}
else {
$('#menu').animate({
'margin-left': "0"
}, 300, function () {
menu_out = true;
});
}
}
});
CSS
* {
font-family:"Helvetica Neu", "Helvetica", sans-serif;
}
html, body {
background: #c3c3c3;
font-weight: 300;
margin: 0;
}
#container {
position: relative;
background: black;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
}
#menu {
background: #000;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
color: white;
margin-left: -71%;
float: left;
}
.menu_item {
width: 100%;
border-bottom: solid 1px #333;
background: #222222;
height: 40px;
font-size: 14px;
color: #fff;
}
.menu_item a {
font-size: 14px;
font-weight: 400;
display: block;
color: white;
text-decoration: none;
padding: 12px 0 0 15px;
}
.menu_head {
height: 47px;
}
.menu_head h1 {
color: #fff;
font-size: 15px;
font-weight: bold;
padding: 14px 0 15px 10px;
margin: 0;
background: #000;
border-bottom: solid 1px #333;
}
#content {
color: white;
overflow: hidden;
}
.top_button {
border: none;
background: black;
position: absolute;
top: 11px;
left: 18px;
}
.button_strips {
width: 21px;
height: 3px;
margin: 3px 5px;
background: white;
}
.top {
height: 46px;
border-bottom: solid 1px #333;
position: relative;
}
.display {
text-align: right;
white-space: nowrap
}
p {
white-space: nowrap;
}
HTML
<div id="container">
<div id="menu">
<div class="menu_head"><h1>MENU</h1></div>
<div class="menu_item">Link 1</div>
<div class="menu_item">Link 2</div>
<div class="menu_item">Link 3</div>
<div class="menu_item">Link 4</div>
<div class="menu_item">Link 5</div>
</div>
<div id="content">
<div class="top"> <a class="top_button">
<div class="button_strips"></div>
<div class="button_strips"></div>
<div class="button_strips"></div>
</a>
</div>
<div class="display">
<!-- Add text when needed /-->
</div>
</div>
</div>
http://jsfiddle.net/L7zs39dj/
Always try to use preventDefault when using function event with link:
$('#menu a').click(function (e) {
e.preventDefault();
menu_move();
});

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();

Categories