Develop Reference

Parent's stopPropagation is disabling grandchild's functionality

I have a modal which when open gets this jquery statement:
$(".modal-inner").on("click", function(e) {
e.stopPropagation();
});
The trouble is, nested within this modal body, I have a child element that I'm using Clipboard.js on so a user may copy text. HTML as follows:
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>
The stopPropagation on .modal-inner keeps the modal from closing if the user clicks inside. This in turn disables my button which executes a script when clicked. I need this button to bypass the stopPropagation from the parent element.

You could just check if the button is clicked, and stop propagation conditionally
$(".modal-inner").on("click", function(e) {
if ( $(e.target).closest('#thisClip').length > 0 ) { // this is the button
e.stopPropagation();
}
});

This is probably not elegant but I believe will work:
$(".modal-inner").on("click", function(e) {
if (!$("button").is(":hover")) e.stopPropagation();
});

You may try testing the event target id and tagName:
$('.modal-inner').on("click", function(e) {
//
// you may also use:
// if ( $(e.target).is('#thisClip') ) {
//
if (e.target.id = 'thisClip' && e.target.tagName == 'BUTTON') {
e.stopPropagation();
console.log('You clicked the button: stop propagation');
} else {
console.log('You did not click the button');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-inner"> <!-- stopPropagation applied to parent -->
<div class="modal-close" for="modal-1"></div>
<h1>Let's Connect</h1>
<i class="e"></i>
<p>You can reach me at:</p>
<p class="em">
<input id="emailToCopy" value="this.email#gmail.com"/>
<!-- This grandchild's functionality is now disabled -->
<button class="clip-btn" id="thisClip" data-clipboard-action="copy" data-clipboard-target="#emailToCopy" value="clipBtn">copy email</button>
</p>
</div>

jQuery Accordion Grid that opens full width

I have a jQuery Accordion and my problem is two-fold.
When you click on the persons name to close the div (after you've clicked to open it) it closes then slides the whole window up. I don't want it to slide the whole window up.
When you click on the person's image to open the div and then click to close it, the div closes but then opens again right away and the whole window slides up.
My jQuery:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
});
And my HTML looks like this:
<div class="accordion"><!-- THUMBNAIL -->
<div class="accordion-item">
<a class="accordion-section-title" href="#accordion-1">
<img src="http://placehold.it/150x150" alt="First Last" width="150" height="150" />
</a>
<span class="accordion-section-name">
<a class="accordion-section-title" href="#accordion-1">First Name</a></span>
<span class="accordion-section-expertise">Expertise</span>
</div>
<!--end .accordion-item-->
<!-- ABOUT -->
<div id="accordion-1" class="accordion-section-content">
<div class="advisors">
<ul class="advisors">
<li>Marketing and Communications</li>
<li>Sales and Business Development</li>
<li>Finance</li>
<li>Startup Strategy</li>
</ul>
</div>
<div class="about">
<p class="about">About</p>
Biography
</div>
Does anyone know why this is happening?
Edited to add new function:
jQuery(function($){
$(document).ready(function() {
// do something...
function close_accordion_section() {
jQuery('.accordion .accordion-item .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});
});
return false;
});
This entire window is still sliding up for me.

add return false; after e.preventDefault();

Hope this will work for you,
jQuery('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrValue = jQuery(this).attr('href');
currentAttrValue = currentAttrValue.substring(1, currentAttrValue.length);
jQuery("#" + currentAttrValue).slideToggle();
});

I think what is happening is that the click event on the anchor element is not being stopped and because of which the page tries to navigate to the id of the element passed as href param, and hence it scrolls up.
So you should try stopping the click event from bubbling up.
So either you can use e.preventDefault(); or return false;
As shown in this DEMO.

Dropdown menu should not be closed if it is clicked inside

I put a panel inside a bootstrap dropdown, but when I click inside the panel, the dropdown goes away. I got many solution on stackoverflow but it didn't work for me. How can i prevent panel from disappearing when i click inside.enter code here
<span class="input-group-addon dropdown">
<label class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown aria-expanded="false">Advanced Search <span class="caret"></span></label>
<div class="panel panel-default panel-body dropdown-menu " role="menu"" aria-labelledby="dropdownMenu1" style="width:860px; margin-left:-700px">
Panel content
</div>
</span>

Try to do something like this:if you click on the body it checks the parent class,if you click on the dropdown if parent has class .dropdown-parentclass then the dropdown does not close.
$('body').click(function(event){
if ($(event.target).parent('.dropdown-parentclass').size()>0) {
return false;
}
});

try using the code below. It will close the dropdown only when you click out side the container.
$(document).on("mouseup", function (e) {
var container = $(".panel");
if (!container.is(e.target) // if the target of the click isn't the container
&& container.has(e.target).length === 0) // nor a descendant of the container
{
container.hide();
}
else {
}
});

Isotope filter buttons within bootstrap menu/popup

I'm using Isotope and Bootstrap together. I'm able to get them both working by following the many examples from the web... but the filter buttons stop working as soon as I put them in a select or popup or menu. Is this normal or am I missing something!?
I'm guessing this line is wrong but how!! -> $('.filters a').click(function()
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.item',
filter: '*',
layoutMode: 'masonry'
});
var filters = {};
// bind filter button click
$('.filters a').click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('active')) {
return;
}
var $optionSet = $this.parents('.option-set');
// change selected class
$optionSet.find('.active').removeClass('active');
$this.addClass('active');
// store filter value in object
var group = $optionSet.attr('data-filter-group');
filters[group] = $this.attr('data-filter-value');
// convert object into array
var isoFilters = [];
for (var prop in filters) {
isoFilters.push(filters[prop]);
}
var selector = isoFilters.join('');
$container.isotope({
filter: selector
});
return false;
});
// pop up div content
$('[rel=popover]').popover({
html : true,
trigger : 'click',
placement : 'auto bottom',
content: function() {
return $('#'+this.id+'-content').html();
}
});
// popup auto close
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
});
or could it be the html that is not right? I have tried so many combinations!
<div class="btn-group">
<div>Catagories</div>
...
</div>
<div id="isotope-catagories-content" style="display: none" class="filters option-set button-group" data-filter-group="catagory">
<a class="active button btn-default" href="#" data-filter-value="" >show all</a>
<?php $categories = get_categories('orderby=name'); foreach ($categories as $cat) { ?>
<a class="button btn-default" href="#" data-filter-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a>
<?php } ?>
</div>
...
This works perfectly fine as long as the filter buttons are buttons or divs... as soon as I put them in a popup (in this case) it looks fine but nothing happens when the filter buttons are clicked.
The goal is to have Isotope filters for (WP)Catagories, Authors and Tags each within their own popup or menu or hidable div.

I have sort of answered my own question. Instead of using a popup or menu I have put the filter buttons in a second isotope instance by following this answer by hyde
I modified Hyde's example of multiple isotope instances on Fiddle
check out my fiddle
I'm still tuning it but the basic idea (of retractable filter button groups) is working.
<!-- first filter buttons -->
<section id="options" class="clearfix">
<h3>Filters</h3>
...
</section>
<!-- end first filter buttons -->
<!-- first filter container -->
<div id="container" class="container clearfix">
<--! second filter buttons -->
<section id="options-new" class="clearfix">
<h3>Filters</h3>
...
</section>
<!-- second filter buttons -->
</div>
<--! first filter container -->
<--! second filter container -->
<div id="container-new" class="clearfix">
...
</div>
<--! second filter container -->
I'm still open to input on refinements!! :)

jquery expand / collapse?

Im trying to make my jquery expand when clicked anywhere ( except the top left box ) and try to collapse when clicking only in the ( top left box )
http://jsfiddle.net/wzbAh/1/
HTML:
<div id="box">
<div class="collapsed container" >
<div class="nav" class="closed">0</div>
box 1 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
<div class="collapsed_content">
collapsed only content #1
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 2 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
<div class="collapsed container">
<div class="nav" class="closed">0</div>
box 3 - click me
<div class="expanded_content">
extra content only for expanded state
</div>
</div>
</div>
JavaScript:
$("#box").delegate(".container", "click", function(e) {
$(this).addClass("expanded");
});
$("#box").delegate(".container.expanded .nav ", "click", function(e) {
$(this).addClass("collapsed");
});
Seems to be almost there but not quite, what would be the right way to do it? Since toggle seems not the option here.

Here you go mate...
$("#box").delegate(".container", "click", function(e) {
if ($(e.target).hasClass("container")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container.expanded .nav", "click", function(e) {
$(this).parent().removeClass("expanded");
e.stopPropagation();
});
​
The class "collapsed" is never removed so to remove the expanded state you need to use removeClass("expanded"), so it goes back to its initial state. Also, when the .nav element is clicked, the div you want to affect is the parent.
Finally, e.stopPropagation() stops the click firing both event handlers and removing the class and then adding it again.
Here's a working jsfiddle...
http://jsfiddle.net/wzbAh/11/

$("#box").delegate(".container", "click", function(e) {
if (!$(e.target).is("div.nav")) {
$(this).addClass("expanded");
}
});
$("#box").delegate(".container .nav ", "click", function(e) {
$(this).parent().removeClass("expanded").addClass("collapsed");
});
http://jsfiddle.net/jensbits/wzbAh/9/