This is code where I want to enable stoppropagation on the class "Object" cause stop propagation I have used for modal class, to prevent close popup. And stoppropagation on the modal class has killed the javascript function in the 'object' class, so I have to prevent the stoppropagation function on the object class, so that the javascript inside the object class can work. Is there any solution? thank you so much. detil modal popup, codepin
$('.button').click(function() {
var buttonId = $(this).attr('id');
$('#modal-container').removeAttr('class').addClass(buttonId);
$('body').addClass('modal-active');
})
$('#modal-container').click(function() {
$(this).addClass('out');
$('body').removeClass('modal-active');
});
$('.modal').click(function(e) {
e.stopPropagation();
});
<div id="one" class="button">Button</div>
<div id="modal-container">
<div class="modal-background">
<div class="modal">
<div class="object">
<h2>Record your voice</h2>
<button>Press To Record</button>
<span>00:00</span>
<button>Send</button>
</div>
</div>
</div>
</div>
Related
I have a function which, when clicking on a link with the class .show-more, opens up the div with the class .productinfo. Now, it also adds a class to the link itself (.active) - the problem what I have is that I have a few links on this page with the same class. I've managed to only open up the correct .productinfo when clicking on it, but the class will be added to every link nonetheless. Also tried adding the following to the code but that did not work:
$(this).find('show-more').toggleClass("active");
My structure is the following:
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
<div class="main-content">
<div class="col-1">Content 1</div>
<div class="col-2">Content 2</div>
<div class="col-3"><a class="show-more">Show more</a></div>
<div class="productinfo">This content is hidden and will be shown when clicked</div>
</div>
jQuery(document).ready(function($) {
$('body').on('click', 'a.show-more', function(e) {
e.preventDefault();
$('.show-more').toggleClass("active");
var $this = $(this).parents('.product');
$this.find('.productinfo').toggle(0, 'slide')
});
});
Why not:
$('a.show-more').on('click', function(e)
and then
$(this).toggleClass("active");
I have a question, and I doubt it is possible. the question is as follows:
How can my onclick be executed without the anchor tag being activated?
The onclick will show the disclaimer message.
Sample code:
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...."/>
</div>
<div class="disclaimer-message">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
</div>
</div>
</div>
</a>
Thanks in advance :)
I would write a dedicated function to handle your click.
<span onclick="clickHandler">...</span>
See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().
function clickHandler(e) {
e.preventDefault()
e.stopPropagation()
}
This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="alert('hello');return false">try me</span>
</a>
Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>
</a>
To prevent the anchor link being invoked on click event :
Assign the click listener on the highest parent possible (right after anchor tag)
Prevent the event bubbling up to the anchor by invoking its preventDefault method
var container = document.querySelector('#container');
container.addEventListener('click', function(event) {
event.preventDefault();
var msgBlock = container.querySelector('.disclaimer-message');
msgBlock.classList.toggle('disclaimer-show');
msgBlock.classList.toggle('hide');
});
a {
text-decoration: none;
}
.disclaimer-show {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...." />
</div>
<div class="disclaimer-message hide">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span>?</span>
</div>
</div>
</div>
</a>
<a href="websiteurl.com">
<p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>
Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor
I have 3 nested divs..
<div onclick="highlight(this)">1
<div onclick="highlight(this)">2
<div onclick="highlight(this)">3
</div>
</div>
</div>
To stop event-bubbling, I want add a syntax to the divs - stopPropagation().
I've tried (for first div only here)
document.querySelectorAll("div")[0].setAttribute("onclick", "event.stopPropagation()");
But it's not working. What is the solution/alternative to this..??
I want the divs to be like..
<div onclick="highlight(this) event.stopPropagation()">1
As you need to stop propagation of event, it seems to make sense that the corresponding action is attached to event itself. Here's one possible way of using it:
HTML
<div id="outer" onclick="highlight(event, this)">
<div id="middle" onclick="highlight(event, this)">
<div id="inner" onclick="highlight(event, this)">
</div>
</div>
</div>
JS
function highlight(event, target) {
event.stopPropagation();
console.log( target.id + ' is clicked' );
}
Demo.
I've got a function that, when you click in a textarea, it will slide down a button.
However, I have multiple textareas on the page with the same class and the problem is that if you click on any of the textareas, all of them will slide down the button.
How can I make it so that it only slides down on the textarea element that you click on, and not the others?
Here's a quick JSFiddle I made: http://jsfiddle.net/MgcDU/6100/
HTML:
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="well">
<textarea style="width:462px" placeholder="Comment..."></textarea>
<button class="btn btn-primary btn-toggle" type="button">Post</button>
<div class="clearfix"></div>
</div>
</div>
JavaScript:
$("textarea").click(function(){
$(".btn-toggle").slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(".btn-toggle").slideUp();
}
});
Have to find the elements relative to the element that was clicked.
$(this) is the element that was clicked, and siblings() finds elements that are siblings.
http://jsfiddle.net/P9nMq/
$("textarea").click(function(){
$(this).siblings('.btn-toggle').slideDown();
});
$(document).click(function(e){
e.stopPropagation();
if($(e.target).parents(".well").length == 0){
$(this).find('.btn-toggle').slideUp();
}
});
How about instead of relying on a class lookup, use the event target:
$("textarea").click(function(evtTarget){
$(evtTarget.target).parent().find($(".btn-toggle")).slideDown();
});
http://jsfiddle.net/paulprogrammer/MgcDU/6103/
The following snippet selects all the buttons:
$(".btn-toggle").slideUp();
You should replace it with this:
$(this).siblings(".btn-toggle").slideUp();
Update
I would rewrite your script with these lines :
$(".well").('focus blur', "textarea", function(e){
$(this)
.siblings(".btn-toggle")
.stop(true, true)
.slideToggle();
});
The advantage is that you delegate the events on the same parent of the two targeted elements and that you do not rely on any click event handlers.
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/